CSS中的弹性盒布局（flex）

弹性盒布局(FlexBox)

FlexBox布局模型

FlexBox布局属性

容器属性

display

功能：用来指定元素是否使用的弹性布局，给父容器设置该属性。

.flex-container{
    display:flex;/*块级伸缩属性*/
    display:inline-flex;/*行内伸缩属性*/
}

flex-direction

功能：控制伸缩容器中主轴的方向，同时也决定了伸缩项目的方向。

.flex-container{
    flex-direction:row;/*默认属性，主轴从左到右排列*/
    flex-direction:row-reverse;/*和row相反，主轴从右到左排列*/
    flex-direction:column;/*从上到下排列*/
    flex-direction:column-reverse;/*从下到上排列*/
}

flex-wrap

功能：用来控制伸缩容器时单行还是多行，能否换行，也决定了侧轴方向。

.flex-container{
    flex-wrap:nowrap;/*默认值，不换行*/
    flex-wrap:wrap;/*换行*/
    flex-wrap:wrap-reverse;/*反向换行*/
}

flex-flow

功能：flex-direction和flex-wrap的缩写

示例：

/*格式：*/
flex-flow:[flex-direction][flex-wrap];
/*例如：*/
flex-flow:row-reverse wrap;

justify-content

功能：定义伸缩项目在主轴方向上的对齐方式

.flex-container{
    justify-content:flex-start;/*靠近主轴开始的地方对齐*/
    justify-content:flex-end;/*靠近主轴结束的地方对齐*/
    justify-content:center;/*居中对齐*/
    justify-content:space-between;/*两端对齐，两端的项目紧挨端点，其它的项目之间距离平均分配*/
    justify-content:space-around;/*项目左右空隙大小一致（中间的两个项目之间距离为两倍的空隙，端点处是一倍的空隙）*/
}

align-items

功能：定义伸缩项目在侧轴的对齐方式

.flex-container{
    align-items:flex-start;/*靠近侧轴开始的地方对齐*/
    align-items:flex-end;/*靠近侧轴结束的地方对齐*/
    align-items:center;/*居中对齐*/
    align-items:baseline;/*项目的第一行文字基线对齐*/
    align-items:stretch;/*项目拉伸至两端对齐*/
}

效果：

align-content

功能：定义多个项目多行情况下在交叉轴的对齐方式

.flex-container{
    align-content:flex-start;/*沿着交叉轴的起始位置对齐*/
    align-content:flex-end;/*沿着交叉轴的终止位置对齐*/
    align-content:center;/*沿着交叉轴方向居中对齐*/
    align-content:space-between;/*元素均匀分布，第一行与起始位置对齐，最后一行与终止位置对齐，空白空间随机分配*/
    align-content:space-around;/*元素均匀分布，行与行之间的间距一致*/
    align-content:stretch;/*元素被拉伸来占满剩余的空间*/
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hUNmS76o-1596965107377)(C:\Users\76110\AppData\Roaming\Typora\typora-user-images\image-20200626134158198.png)]

项目属性

order

功能：定义项目的排列顺序，数值越小的越靠前，默认值为0.

示例：

<style>
    .container{
        display:flex;
    }
    .box1{
        order:1;
    }
    .box4{
        order:-1;
    }
</style>
<div class="container">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
</div>

结果：排列的顺序是 4 2 3 1

flex

功能：指定可伸缩长度

语法格式：

flex:none|[<'flex-grow'>?<'flex-shrink'>||<'flex-basis'>]

第一个属性flex-grow必填，后面的可选

flex-grow

功能：定义伸缩项目的放大比例，默认为0，不放大。

flex-shrink

功能：定义项目的缩放比例

flex-basis

功能：定义项目伸缩的基准值，默认为auto，可以选width的数值。

align-self

功能：单独设置伸缩项目在交叉轴的对齐方式，可以覆盖之前的容器属性。

示例：

align-self:auto|flex-start|flex-end|center|baseline|stretch