Flex布局
2020-05-18 13:37:15 3 举报AI智能生成
学flex布局，这一张图就够了
作者其他创作
大纲/内容
基本概念
main axis：水平主轴
main start：主轴开始位置
main end：主轴结束位置
corss end：交叉轴
cross start：交叉轴开始位置
cross end：交叉轴结束位置
main size：单个项目占据主轴空间
cross size：单个项目占据交叉轴空间
容器的属性
flex-direction：定义主轴方向
row：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上方
column-reverse：主轴为垂直方向，起点在下方
flex-wrap：是否换行
nowrap：（默认）不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
flex-flow：简写形式
<flex-direction> || <flex-wrap> 的简写(可以省略，顺序任意 )
例：flex-flow: row wrap; // 定义主轴为水平方向，并且换行
例：flex-flow: row wrap; // 定义主轴为水平方向，并且换行
justify-content：在主轴方向上的对齐方式
flex-start（默认值）：与main start对齐
flex-end：与main end对齐
center：居中对齐
space-between：两端对齐
space-evenly：等分对齐
space-around：等分对齐（两端间隔为中间间隔的一半）
align-items：在交叉轴上的对齐方式
stretch（默认值）：项目未设置高度情况下会占满整个容器
flex-start：与 cross start 对齐
flex-end：与 cross end 对齐
center：居中对齐
baseline：与项目第一行文字的基线对齐
align-content：决定多行flex items在交叉轴上的对齐方式
（用法与justify-content类似）
（用法与justify-content类似）
stretch（默认值）：与 align-items 的 stretch 类似
flex-start：与 cross start 对齐
flex-end：与 cross end 对齐
center：居中对齐
space-between
space-evenly
space-around
项目的属性
order：排列顺序，默认值为0
<number>：数值越小越靠前
flex-grow：放大比例，默认值为0
<number>：定义项目的放大比例
flex-shrink：缩小比例，默认值为1
<number>：定义项目的缩小比例，为0是不缩小
flex-basis：分配多余空间之前，项目占据的主轴空间
<length>：数值定义项目占用主轴的宽度
auto（默认值）：项目的本来大小
align-self：定义单个项目与其它项目不一样的对齐方式
flex-start：与 cross start 对齐
flex-end：与 cross end 对齐
center：居中对齐
baseline：与项目第一行文字的基线对齐
strech（默认值）:项目未设置高度情况下回占满整个容器
flex：简写形式
<flex-grow> ||<flex-shrink>||<flex-basis>
<flex-grow> ||<flex-shrink>||<flex-basis>
单值语法
值必须为以下其中之一:
□ 一个无单位数(<number>): 它会被当作<flex-grow>的值。
□ 一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。
□ 关键字none，auto或initial.
□ 一个无单位数(<number>): 它会被当作<flex-grow>的值。
□ 一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。
□ 关键字none，auto或initial.
双值语法
第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
第二个值必须为以下之一：
□ 一个无单位数：它会被当作 <flex-shrink> 的值。
□ 一个有效的宽度值: 它会被当作 <flex-basis> 的值。
第二个值必须为以下之一：
□ 一个无单位数：它会被当作 <flex-shrink> 的值。
□ 一个有效的宽度值: 它会被当作 <flex-basis> 的值。
三值语法：
□ 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
□ 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。
□ 第三个值必须为一个有效的宽度值， 并且它会被当作 <flex-basis> 的值。
□ 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。
□ 第三个值必须为一个有效的宽度值， 并且它会被当作 <flex-basis> 的值。
0 条评论
下一页
