（19）HTML&&CSS笔记（flex布局）

1、弹性盒子模型（flex容器）：定义弹性伸缩盒容器类型
用法：
display：flex；将对象作为块级弹性弹性盒模型；
display：inline-flex；将对象作为内联块级弹性弹性盒模型；
（之前学过display：block/inline-block；）

2、flex容器
采用flex布局的元素，称为flex容器（flex container），简称“容器”。

3、flex项目
它的所有子元素自动称为容器成员，称为flex项目（flex item），简称“项目”，任何一个元素都可以指定为flex布局。

4、flex-direction 排列盒子方向

• row（默认）：横向从左到右排列。（横向）
• row-reverse：对齐方式与row相反。（倒序排列）
• column：纵向从上往下排列。（纵向）
• column-reverse：对齐方式与column相反。（倒序排列）

5、主轴与交叉轴
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

6、flex-wrap 换行方式

• nowrap（默认）：不换行
• wrap：换行第一行在上方。
• wrap-reverse：换行，第一行在下方。

混合写法：flex-flow:flex-direction flex-wrap;

7、justify-content 定义了项目在主轴上的对齐方式

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，项目之间的间隔都相等
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍（如下图所示）
  
  8、align-items 属性定义项目在交叉轴上如何对齐
• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center：交叉轴的中点对齐
• baseline：项目的第一行文字的基线对齐
• stretch（默认值）：如果项目未设置宽高或设为auto，将沿交叉轴占满整个容器的高度或宽度

9、order
属性定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以为负值。
（如下图所示）

.item1{order:10;}
.item2{order:20;
.item3{order:-10;}
.item4{order:0;}
.item5{order:-1;}

 <ul>
        <li class='item1'>1</li>
        <li class='item2'>2</li>
        <li class='item3'>3</li>
        <li class='item4'>4</li>
        <li class='item5'>5</li>
    </ul>

10、flex-grow 属性用于设置或检索弹性盒子的扩展比率。(用于移动端)
注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。