前端知识点（三）：Flex布局（弹性布局）1.定义flex布局
(1)display:flex;
(2)⾏内元素 display:inline-flex;
⽗元素中设置为flex布局，形成flex容器。⼦元素的float、clear、vertical-align属性将失效。
2.Flex容器属性--定义在⽗元素中
排列：
（1）flex-direction：决定了主轴的⽅向(⼦元素的排列⽅向)flex布局对齐方式
row:(默认)⽔平⽅向从左到右为主轴；
row-reverse:⽔平⽅向从右到左为主轴；
column：垂直⽅向从上到下为主轴；
column：垂直⽅向从下到上为主轴；
（2）flex-wrap：决定了当⼦元素在⼀条轴线上排不下时，是否换⾏
nowrap:（默认）不换⾏；
wrap：向下换⾏；
wrap-reverse：向上换⾏
（3）flex-flow：是flex-direction和flex-wrap的的简写，默认值row nowrap
对齐：
（4）justify-content:⼦元素在主轴⽅向上的对齐⽅式
flex-start:（默认）与主轴的起点对齐；
flex-end：与主轴的终点对齐；
center：与主轴的中点对齐；
space-between：两边对齐；
space-around：两边等间隔对齐；（⼦元素之间的间隔是⼦元素与边框间隔的⼆倍）
（5）align-items:⼦元素在交叉轴的对齐⽅式flex-start：交叉轴起点对齐；
flex-end：交叉轴终点对齐；
center：交叉轴中点对齐；
baselin:⼦元素第⼀⾏⽂字的基线对齐；
stretch:(默认)：占满容器的⾼度；
（6）align-content：多根轴线（多⾏显⽰）的对齐⽅式
flex-start：交叉轴起点对齐；
flex-end：交叉轴终点对齐；
center：交叉轴中点对齐；
space-between：交叉轴两边对齐；
space-around：轴线两侧等间隔对齐；（轴线之间的间隔是轴线与边框之间间隔的⼆倍）stretch：轴线占满整个交叉轴；
3.Flex项⽬（成员）的属性--定义在⼦元素上
（1）order:⼦元素的排列顺序。数值越⼩越靠前。
（2）flex-grow:⼦元素的放⼤⽐例。默认0。即存在剩余空间，也不放⼤
（3）flex-shrink:⼦元素的缩⼩⽐例。默认1。即空间不⾜，⼦元素将缩⼩
（4）flex-basis：在分配多余空间时，⼦元素占据的主轴空间，默认值auto。即⼦元素本来⼤⼩
（5）flex：是flex-grow、flex-shronk、flex-basis的简写，默认值0 1 auto。
（6）align-self：允许某⼀个⼦元素与其他⼦元素对齐⽅式不同，默认auto，表⽰继承⽗元素的align-items属性。
auto：继承⽗元素的align-items属性；flex-start：交叉轴起点对齐；
flex-end：交叉轴终点对齐；
center：交叉轴中点对齐；
baselin:⼦元素第⼀⾏⽂字的基线对齐；stretch:(默认)：占满容器的⾼度；
4.基础应⽤
垂直居中对齐
.father {//⽗盒⼦
display: flex;
justify-content: center;
align-items: center;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。