前言
初次学习Flex布局，借此记录整理笔记。
一、Flex
介绍
- 弹性盒模型，CSS的一种布局方式，可以代替float使用。
- 元素具有弹性，跟随页面大小变化而变化。
基本概念
1.弹性容器
- 使用Flex布局的基础，即将一个元素设为弹性容器
- 设置方式：
- 块级弹性容器
- 行内弹性容器
display:flex;
display:inline-flex;
2.弹性元素
- 弹性容器的子元素为弹性元素
- 可以嵌套声明，即弹性元素也可以为弹性容器
3.主轴
- 弹性元素排列的方向
4.交叉轴（辅轴）
- 与主轴垂直的方向
二、基本属性
1.容器的属性
- flex-direction:
- 属性值：row(默认值） | row-reverse | column | column-reverse
- flex-wrap:
- 属性值：nowrap(默认值) | wrap | wrap-reverse
- justify-content:
- 属性值：flex-start(默认值) | flex-end | center | space-start | space-end | space-evenly
- align-items:
- 属性值：stretch(默认值) | flex-start | flex-end | center | baseine
- align-content:
- 属性值：flex-start(默认值) | flex-end | center | space-start | space-end | space-evenly
flex-direction
指定弹性元素排序方式
row
- 水平方向，自左向右，默认值
- 此时主轴方向水平，自左向右
row-reverse
- 水平反方向，自右向左
- 此时主轴方向水平，自右向左
column
- 竖直方向，自上向下
- 此时主轴方向垂直，自上向下
column-reverse
- 竖直反方向，自下向上
- 此时主轴方向垂直，自下向上
ul{
display:flex;
flex-direction: row|row-reverse|column|column-reverse
}
flex-wrap
指定元素是否自动换行
nowrap
- 元素不会自动换行，默认值
wrap
- 元素沿辅轴方向自动换行
wrap-reverse
- 元素沿着辅轴反方向自动换行
ul{
display:flex;
flex-direction:row;
flex-wrap: nowrap|wrap|wrap-reverse;
}
注意
- flex-flow:
- wrap和direction的简写属性，属性值无顺序要求，空格分隔
justify-content
指定主轴上剩余空间如何分配（元素在主轴上如何排列）
flex-start
- 默认值，剩余空间不分配
- 元素从主轴起点开始排列
flex-end
- 剩余空间不分配
- 元素从主轴终点开始排列
center
- 元素在主轴上居中排列
- 剩余空间分配在所有元素的两侧
space-around
- 主轴剩余空间分配到每个元素两侧
- 中间空间是边上空间的两倍
space-between
- 主轴剩余空间均匀分配到元素中间
space-evenly
- 主轴剩余空间分配到每个元素的单侧
- 兼容性不高，谨慎使用
ul{
display:flex;
justify-content: flex-start|flex-end|center|space-around|space-between|space-evenly;
}
align-items
指定元素在辅轴上如何对齐
stretch
- 默认值
- 伸长元素，确保每行元素长度值相同，填满整行（元素未设置高度或高度为auto）
flex-start
- 元素不伸长，沿（每行的）辅轴起点对齐
flex-end
- 元素不伸长，沿（每行的）辅轴终点对齐
center
- 沿（每行的）辅轴居中对齐
baseline
- 以元素首行文字的基线对齐
- 适用于元素文字大小不同，不常用
ul{
display:flex;
align-items: stretch|flex-start|flex-end|center|baseline;
}
align-content
指定辅轴上剩余空间如何分配（元素在辅轴上如何排列），与 justify-content 属性类似
flex-start
- 默认值，剩余空间不分配
- 元素从辅轴起点开始排列
flex-end
- 剩余空间不分配
- 元素从辅轴终点开始排列
center
- 元素在辅轴上居中排列
space-around
- 辅轴剩余空间分配到每个元素两侧
- 中间空间是边上空间的两倍
space-between
- 辅轴剩余空间均匀分配到元素中间
space-evenly
- 辅轴剩余空间分配到每个元素的单侧
- 兼容性不高，谨慎使用
ul{
display:flex;
align-content: flex-start|flex-end|center|space-around|space-between|space-evenly;
}
2.元素的属性
- order:
- 属性值：0（默认值）
- flex-grow:
- 属性值：0（默认值）
- flex-shrink:
- 属性值：
- flex-basis:
- 属性值：
- align-self:
- 属性值：
order
指定元素排列顺序
- 任意数字，数字大的元素排在后面
- 默认值：0
li:nth-child(1){
order:2;
}
li:nth-child(2){
order:3;
}
li:nth-child(3){
order:1;
}
flex-grow
指定元素的增长系数
- 默认值：0
- 将剩余空间按比列分配给元素，即元素按比例增长
li:nth-child(1){
flex-grow:0;
}
li:nth-child(2){
flex-grow:3;
}
li:nth-child(3){
flex-grow:1;
}
flex-shrink
指定元素的缩减系数
- 默认值：1
- 缩减大小与缩减系数和元素自身大小有关
li:nth-child(1){
flex-shrink:0;
}
li:nth-child(2){
flex-shrink:2;
}
li:nth-child(3){
flex-shrink:15;
}
flex-basis
指定元素在主轴上的初始大小
- 主轴如果水平，则指定元素宽度；如果竖直，则指定元素高度
- 默认值：auto（元素自身的高度或宽度）
- 传值则改变元素的高度或宽度
ul{
dispaly:flex;
flex-direction:row;
}
li:nth-child(1){
flex-basis:auto;
}
li:nth-child(2){
flex-basis:100px;
}
li:nth-child(3){
flex-basis:10px;
}
ul{
dispaly:flex;
flex-direction:column;
}
li:nth-child(1){
flex-basis:auto;
}
li:nth-child(2){
flex-basis:100px;
}
li:nth-child(3){
flex-basis:10px;
}
注意
flex:
- flex-grow 和 flex-shrink 和 flex-basis的简写属性，属性值有固定顺序
- 属性值：
- initial：
相当于 flex: 0 1 auto;
元素不会增长，但会缩减，会根据自身宽高设置尺寸- auto：
相当于 flex: 1 1 auto;
元素会增长，会缩减，会根据自身宽高设置尺寸- none
相当于 flex: 0 0 auto;
元素完全非弹性，不会增长，不会缩减，但会根据自身宽高设置尺寸
align-self
覆盖当前元素上的align-items
stretch
- 默认值
- 仅伸长此元素，填满整行（元素未设置高度或高度为auto）
flex-start
- 不伸长此元素，仅使它沿（该行的）辅轴起点对齐
flex-end
- 不伸长此元素，仅使它沿（该行的）辅轴终点对齐
center
- 使此元素沿（该行的）辅轴居中对齐
baseline
- 以元素首行文字的基线对齐
- 适用于元素文字大小不同，不常用
ul{
display:flex;
align-items:flex-start;
}
li:nth-child(1){
align-self:stretch;
}
ul{
display:flex;
align-items:stretch;
}
li:nth-child(2){
align-self:flex-start;
}
ul{
display:flex;
align-items:stretch;
}
li:nth-child(3){
align-self:flex-end;
}
ul{
display:flex;
align-items:stretch;
}
li:nth-child(4){
align-self:center;
}
ul{
display:flex;
align-items:stretch;
}
li:nth-child(5){
align-self:baseline;
}
附
学习视频：尚硅谷新版Web前端HTML5+CSS全套基础教程完全版（131,133-134集）