弹性布局flex
在平时的我们常用的布局类型有以下几种:
- 1.浮动+定位
- 2.自适应(百分比)
- 3.响应式布局
- 4.弹性布局(Flex布局)
今天所要整理的就是比较常用的弹性布局,但块标签与行内块标签是有区别的。
// css样式
* {
padding: 0;
width: 0;
box-sizing: border-box;
}
.item {
width: 110px;
height: 110px;
background-color: aqua;
margin: 5px;
}
.list {
width: 500px;
height: 500px;
border: 3px solid brown;
/* list 容器变为弹性盒子
主轴: 默认 从左往右
交叉轴: 与主轴垂直的 ,默认从上到下
*/
display: flex; // 容器变为弹性盒子
}
// 布局
<div class="list">
<div class="item">001</div>
<div class="item">002</div>
<div class="item">003</div>
<div class="item">004</div>
<div class="item">005</div>
</div>
1. flex-direction属性:
- 设置主轴方向
- flex-direction: row (默认值)从左往右排列;
- flex-direction: row-reverse 从右往左排列;
- flex-direction: column 从上往下排列;
- flex-direction: column-reverse 从下往上排列;
2. flex-wrap属性:
- 设置轴线,当子元素宽度和大于父元素时,是否设置在一条线上排列
- flex-wrap: nowrap (默认值)在一条线上排列;
- flex-wrap: wrap 换行多条线排列,第一行在上边;
- flex-wrap: wrap-reverse 换行多条线排列,第一行在下边;
3. align-content属性:
- 设置多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用 :
- align-content: stretch(默认值):轴线占满整个交叉轴 ;
- align-content: flex-start 与交叉轴的起点对齐 ;
- align-content: flex-end:与交叉轴的终点对齐 ;
- align-content: center:与交叉轴的中点对齐 ;
- align-content: space-between:与交叉轴两端对齐,轴线之间的间隔平均分布 ;
- align-content: space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍 ;
4. justify-content属性:
- 在主轴上的对齐方式
- justify-content: flex-start(默认值):左对齐
- justify-content: flex-end:右对齐
- justify-content: center: 居中
- justify-content: space-between:两端对齐,项目之间的间隔都相等。
- justify-content: space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
5. align-items属性:
- 在交叉轴上的对齐方式
- align-items: stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
- align-items: flex-start:交叉轴的起点对齐。
- align-items: flex-end:交叉轴的终点对齐。
- align-items: center:交叉轴的中点对齐。
- align-items: baseline: 项目的第一行文字的基线对齐。
6. 简写方式flex-flow属性:
- flex-flow属性是以1,2属性的简写形式,默认值是row nowrap。
- flex-flow: flex-direction;
- flex-flow: flex-wrap;
注意:
弹性盒子中的元素,不受自身属性的控制其他 inline/block 变为inline-block。