文章目录
参考&推荐阅读
1. 什么是flex
flex (flexible box 弹性盒,伸缩盒) 【弹性布局】
- 是CSS3中的又一种布局手段
- 主要同来代替浮动来完成页面的布局
- flex可以使元素具有弹性,让元素可以跟随页面大小的改变而改变
任何一个容器都可以指定为flex布局
- 当父盒子设为flex布局后,子元素的float、clear和vertical-align属性将失效
- 采用flex布局的元素,成为flex容器,弹性容器,简称容器 container
- 其所有子元素自动成为容器成员,成为flex项目(item),简称项目 item
一句话总结flex布局原理:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
主轴:排列的方向
侧轴:垂直于主轴(后面也称交叉轴)
2. 弹性容器 container
要使用弹性盒,必须先将一个元素设置为弹性容器
(父盒子)通过display设置弹性容器
.box{
display: flex; /* 设置为块级弹性容器*/
dispaly: inline-flex /* 设置为行内弹性容器*/
}
- 设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效
常见容器的属性总结
常见容器属性 | 属性功能 |
---|---|
flex-direction | 设置主轴方向 |
justify-content | 设置主轴子元素排列方式 |
flex-wrap | 设置子元素是否换行 |
align-content | 设置侧轴上子元素的排列方式(多行) |
align-items | 设置侧轴上子元素的排列方式(单行) |
flex-flow | 复合属性,相当于设置了 flex-direction 和 flex-wrap |
flex-direction 排列方向
属性决定主轴的方向(即项目的排列方向)
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
属性值 | 说明 |
---|---|
row(默认值) | 【从左到右】主轴为水平方向,起点在左端。 |
row-reverse | 【从右到左】主轴为水平方向,起点在右端。 |
column | 【从上到下】主轴为垂直方向,起点在上沿。 |
column-reverse | 【从下到上】主轴为垂直方向,起点在下沿。 |
flex-wrap 如何换行
默认情况下,项目都排在一条线(又称"轴线")上(如果显示不开,就缩小子元素的宽度)。
flex-wrap属性定义,如果一条轴线排不下,如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
属性 | 说明 |
---|---|
nowrap(默认) | 不换行。 |
wrap | 换行, |