flex布局

---

前言

flex是flexible box的缩写，译为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局，只需要设置"display : flex"即可；行内元素可以通过设置”display:inline-flex“实现；需要注意的是，如果设置了flex布局，则子元素的float、clear和vertical-align属性将失效；

---

一、flex是什么？

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

二、创建弹性盒子

在你想要布局"项目"的父级属性创建弹性盒子
用display:flex
或者display:inline-flex
当然这个和display:block | inline-block是一样的，就是这个容器是块级元素还是行内快元素，一般都是设置display:flex

三、属性

3.1容器属性

以下6个属性设置在容器上。

• flex-direction 决定主轴的方向（项目在容器里面的排列方向）
• flex-direction 决定主轴的方向（项目在容器里面的排列方向）
• flex-wrap 设置项目在主轴的换行方式
• flex-flow 是flex-direction属性和flex-wrap属性的简写形式
• junstify-content 定义了项目在主轴上的对齐方式
• alingn-items 定义项目在交叉轴上如何对齐
• alingn-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

3.2项目属性

以下6个属性设置在项目上。

• order 定义项目的排列顺序。数值越小，排列越靠前，默认为0
• flex-grow 义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
• flex-shrin 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩
• flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）根据这个属性，计算主轴是否有多余空间
• flex 是flex-grow, flex-shrink 和 flex-basis的简写
• align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

四、容器属性实例

4.1flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）。flex-direction: row | row-reverse | column | column-reverse;

值	作用
row(默认)	主轴为x轴，也就是水平方向，由左往右
row-reverse	主轴为x轴，也就是水平方向，由右往左
column	主轴为y轴，也就是垂直方向，由上往下
column-reverse	主轴为y轴，也就是垂直方向，由下往上

---

        flex-direction: row;
        flex-direction: row-reverse;
        flex-direction: column;
        flex-direction: column-reverse;

![在

4.2 flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。flex-wrap: nowrap | wrap | wrap-reverse;

值	作用
nowrap（默认）	不换行
wrap	换行，第一行在上方
wrap-reverse	换行，第一行在下方

        flex-wrap: nowrap; 
        flex-wrap: wrap; 
        flex-wrap: wrap-reverse; 

4.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。flex-flow: || ;

.container {
  flex-flow: column wrap;
}

4.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

值	作用
flex-start	左对齐
flex-end	右对齐
center	居中对齐
space-between	两端对齐，项目之间的间隔都相等
space-around	每个项目两侧的间隔相等，项目和项目之间的间距就是左右间距的和
space-evenly	每个项目之间的间距以及和容器的间距都相等

 justify-content: flex-start; 
         justify-content: flex-end; 
        justify-content: center; 
         justify-content: space-between; 
        justify-content: space-around; 
         justify-content: space-evenly;

4.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。align-items: flex-start | flex-end | center | baseline | stretch

值	作用
stretch（默认值）	如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中心点对齐
baseline	项目的第一行文字的基线对齐

4.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。align-content: flex-start | flex-end | center | space-between | space-around | stretch;

值	作用
stretch（默认值 ）	不设置高度的情况下，轴线占满整个交叉轴
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中心点对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等，所以项目与项目之间的间距是两个项目的间隔的和

五、项目属性实例

4.1 order属性

1. 每个子容器的order属性默认为0
2. 通过设置order属性值，改变子容器的排列顺序
3. 可以是负值，数值越小的话，排的越靠前

.item1 {
  order: 3; /* default is 0 */
}

4.2 flex-grow属性

在容器主轴上存在剩余空间时, flex-grow才有意义定义的是可放大的能力，0 （默认）禁止放大，大于 0 时按占的比重分放大，负数无效

.container{
    border-left:1.2px solid black;
    border-top:1.2px solid black;
    border-bottom: 1.2px solid black;
    width: 100px;
    height: 20px;
    display: flex;
}
.item{
	border-right:1.2px solid black;
    width: 20px;height: 20px;
}
.item1{
    /* 其他的都是0，这一个是1，1/1所以能所有剩下的空间都是item1的 */
    flex-grow: 1; /* default 0 */
}

4.3 flex-shrink属性

当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义定义的是可缩小的能力，1 （默认）等大于 0 的按比例权重收缩， 0 为禁止收缩，负数无效

.container{
    width: 100px;
    height: 20px;
    display: flex;
    flex-wrap: nowrap;
}
.item{
    width: 50px;height: 20px;
}
.item1{/*收缩权重1/3,总空间50，所以它占33.33，为原本的2/3*/
    flex-shrink: 1; /* default 1 */
}
.item2{/*收缩权重2/3,总空间50，所以它占16.67，为原本的1/3*/
    flex-shrink: 2; /* default 1 */
}
.item3{
    flex-shrink: 0; /* default 1 */
}

4.4 flex-basis属性

flex-basis 指定了 flex 元素在主轴方向上的初始尺寸,它可以是长度（例如 20% 、 5rem 等）或关键字。felx-wrap根据它计算是否换行，默认值为 auto ，即项目的本来大小。它会覆盖原本的width 或 height

.item {
  flex-basis: <length> | auto; /* default auto */
}

4.5 flex属性

flex-grow , flex-shrink 和 flex-basis 组合的简写，默认值为 0 1 auto

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

4.6 align-self属性

这允许为单个弹性项目覆盖默认的交叉轴对齐方式 align-items

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}