0x001 概述
说起关于
flex
的文章。我觉得啊除了阮一峰老师,再也无人能出其右了,所以这里也只是聊做记录。
0x002 基本概念
-
Flex container
:元素添加了flex
属性后就变成了flex
容器, -
Axes
:Flex Container
的坐标轴,分为main axes(主轴)
和cross axes(交轴)
-
Flex item
:父元素一旦添加flex
属性,子元素将直接变成flex
子元素,将不再显示默认布局,而是沿着Flex container
的主轴顺序排列,如果改变主轴方向,则子元素的排列方向也将会改变- 默认样式(
box
定义了一个100*100
的盒子,container
定义了一个500*100
的盒子,bg*
只是背景颜色)
<div class="container "> <div class="box bg1"></div> <div class="box bg2"></div> <div class="box bg3"></div> </div>
- 父元素添加
flex
属性
<div class="container flex"> <div class="box bg1"></div> <div class="box bg2"></div> <div class="box bg3"></div> </div>
- 默认样式(
0x003 容器属性
-
属性简介
-
flex-direction
: -
flex-wrap
: -
flex-flow
: -
justify-content
: -
align-items
: -
align-content
:
-
-
flex-direction
:
这个属性可以改变主轴的方向,子元素沿着主轴排列,所以改变主轴方向将会改变子元素的排列方向- 初始值:
row
-
可选值:
-
row
:主轴从main start
到main end
-
row-reverse
:主轴从main end
到main start
-
column
:主轴从cross start
到cross end
-
column-reverse
:主轴从cross end
到cross start
-
- 初始值:
-
flex-wrap
默认情况向子元素沿着主轴排列时,如果所有子元素的总大小超过父元素,则子元素将会被压缩,该属性可以改变这种情况,使之在这种情况下换行而不压缩子元素宽度- 初始值:
nowrap
-
可选值:
-
nowrap
: 不换行 -
wrap
: 换行 -
wrap-reverse
: 换行并倒序
-
- 初始值:
![clipboard.png](/img/bVKrAI)
-
flex-flow
是flex-direction
和flex-wrap
的缩写形式- 初始值:
row nowrap
- 初始值:
-
justify-content
该属性定义了子元素相对父容器的对齐方式- 初始值 :
flex-start
-
可选值 :
-
flex-start
: 子元素紧靠main start
-
flex-end
: 子元素紧靠main end
-
center
: 子元素居中对齐 -
space-between
: 子元素两侧无边距,等分居中对齐 -
space-around
:子元素等分居中对齐
-
- 初始值 :
-
align-items
该属性定义子元素在交轴上的对齐方式- 初始值 :
stretch
-
可选值 :
-
flex-start
: 子元素相对于cross start
对齐 -
flex-end
: 子元素相对于cross end
对齐 -
center
: 子元素相对于cross axes
居中对齐 -
baseline
: 子元素相对于第一个子元素的基线对齐 -
stretch
: 如果子元素未设定高度,则拉伸至容器最大高度
-
- 初始值 :
-
align-content
该属性定义了多条主轴在交轴上的对齐方式- 初始值 :
stretch
-
可选值 :
-
flex-start
: 多条轴线相对cross start
对齐 -
flex-end
: 多条轴线相对cross end
对齐 -
center
: 多条轴线相对cross axes
居中对齐 -
space-between
: 多条轴线两端无间距,中间等分间距对齐 -
space-around
: 多条轴线等分间距对齐 -
stretch
: 如果轴线未设定高度,则拉伸至容器最大高度
-
- 初始值 :
0x004 子元素属性
-
属性简介:
order
align-self
flex-grow
flex-shrink
flex-basis
-
order
值越小越靠接近main start
- 初始值 : 0
-
flex-grow
该属性定义子元素占据剩余空间的比例,数值越大,占据的比例越大
-
align-self
该属性定义该子元素相对于交轴的对齐方式- 初始值 :
stretch
-
可选值 :
-
flex-start
: 元素相对于cross start
对齐 -
flex-end
: 元素相对于cross end
对齐 -
center
: 元素相对于cross axes
居中对齐 -
baseline
: 元素相对于第一个子元素的基线对齐 -
stretch
: 如果元素未设定高度,则拉伸至容器最大高度
-
- 初始值 :
-
flex-shrink
该属性定义了元素的缩小比例,数值越大,缩小比例越大,0不缩放
-
flex-basis
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。(摘自阮一峰博客原文)
0x004 总结
其实当初看了许多遍阮一峰老师关于flex
的博客,但是依旧没有理解.如今自己整理了一遍,发现了当初理解的误区,当初认为,flex-direction
让子元素的排序方式改变,但是其flex-directory
的作用是让主轴和交轴交换位置.从这个方向理解便可以真正理解flex
在不同方向的布局.
也就是我们不能用x
轴y
轴来理解flex
,而是使用主轴和交轴来理解.