flex布局
- Flexible Box
- flex-direction配置
- 垂直高度强制占满
- flex-wrap配置
- 问题:溢出
- flex-flow(flex-direction与flex-wrap同时配置),默认值为row nowrap
- justify-content配置
- 垂直高度强制占满
- align-item
- 垂直高度不强制占满
- align-content配置
- 配和其他属性属性使用如flex-wrap
Flexible Box
flex
Flexible Box,弹性盒子,包含以下属性
属性 |
用法 |
flex-direction |
弹性方向 |
flex-wrap |
弹性换行 |
flex-flow |
弹性方向与换行 |
justify-content |
水平对齐方式 |
align-items |
垂直内容 |
align-content |
搭配多根轴线的对齐方式(单属性配置无效) |
例:默认的flex布局,未对属性进行配置
<div class="container">
<div class="header">header</div>
<div class="nav">nav</div>
<div class="content">content</div>
</div>
body{
background: #4eddec;
}
*{
margin:0;
padding:0;
}
.container{
position: absolute;
display: flex;
width: 100%;
height:100%;
}
.header{
width: 33.3%;
border: 5px solid #ffaa00;
}
.nav{
width: 33.3%;
border:5px solid #ff5500;
}
.content{
width: 33.3%;
border:5px solid #55ff00;
}
flex-direction配置
垂直高度强制占满
flex-direction: row | row-reverse | column | column-reverse;
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
例:对header进行flex布局,他的子节点收到flex-direction的影响
<div class="header">
<div>header</div>
<div>123</div>
<div>456</div>
<div>789</div>
</div>
.header{
position: relative;
height: 100px;
display: flex;
flex-direction: column-reverse;
border: 5px solid #ffaa00;
}
row水平向右
row-reverse水平反转
column垂直向下
column-reverse垂直反向反转
flex-wrap配置
- nowrap
- wrap自动换行
- wrap-reverse反转
换行
nowrap默认不换行
问题:溢出
可能会溢出
wrap自动换行
wrap-reverse反向换行
flex-flow(flex-direction与flex-wrap同时配置),默认值为row nowrap
flex-flow: <flex-direction> || <flex-wrap>;
例:水平反转不换行
justify-content配置
垂直高度强制占满
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start 开始端点
flex-end 结束端点
center居中排列
space-between:两端对齐,项目之间的间隔都相等
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
align-item
align-items属性定义项目在交叉轴上如何对齐
垂直高度不强制占满
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start 从上往下
flex-end从下往上
center 垂直居中
baseline 第一行对齐
strech高度占满
align-content配置
配和其他属性属性使用如flex-wrap
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
单个属性配置不生效
配和flex-wrap生效
参考:阮一峰的网络日志