弹性布局
2022-05-10 21:55:23 13 举报AI智能生成
弹性布局整理
作者其他创作
大纲/内容
每个子元素项目可单独设置的属性
order
专门定义项目在主轴上的排列顺序
其值为整数数字，无需单位。
值越小，越靠近起点；值越大，越靠近结尾，默认值都是0。
flex-grow
专门定义项目的放大比例
如果容器有足够的空间，项目可以放大
其值为整数数字，无需单位。
默认情况，项目不放大。
默认值都是0
取值越大，占据剩余的空间越多。
取值都一样，则占据空间始终一样大
flex-shrink
专门定义项目的缩小比例
如果容器空间不足时，项目可以缩小。
缩小的比例取决于flex-shrink的值。
其默认值为1，表示空间不足时，则等比缩小。
可改为0，表示不缩小。
align-self
专门单独定义某一个项目在交叉轴上的对齐方式
与align-items属性对比
align-items定义在父容器上约束所有项目的统一对齐方式
align-self定义在项目上，只约束当前所在的一个项目。
其取值和align-items完全一样。只是多了一个auto值，表示继承父元素的align-items效果。
父元素上设置的属性
display:flex
父元素变成弹性布局渲染区域
flex-direction
指定容器主轴的排列方向
row
默认从左向右
row-reverse
从右向左
column
从上到下
column-reverse
从下到上
flex-wrap
当主轴排列不下所有元素时，是否自动换行
默认nowrap
父元素空间不够，也不换行！所有子元素项目自动等比缩小。
wrap
当内容放不下时，自动换行，不缩小
flex-flow
flex-direction + flow-wrap的简写形式
语法: flex-flow: flex-direction flex-wrap
justify-content
定义项目在主轴上的对齐方式
取值
flex-start
以主轴起点对齐
默认左对齐，从左向右排列
flex-end
以主轴终点对齐
默认右对齐，从右向左排列
center
在主轴上居中对齐
space-between，表示两端对齐
第一个元素紧贴最左边，最后元素紧贴最右边。中间多个元素在剩余空间中等间距排列
space-around，表示每个项目两端间距相同
所有元素均分空白间距，包括第一个元素左边间距和最后一个元素右边间距，均是等距离分布
align-items
定义所有子元素在交叉轴上的对齐方式
取值
flex-start，表示让项目以交叉轴的起点方向对齐
默认置顶对齐
flex-end，表示让项目以交叉轴的终点方向对齐
默认置底对齐
center，表示让项目以交叉轴的中线居中对齐
垂直方向居中对齐
baseline，表示让项目以交叉轴的基线对齐
以内容文字的基线对齐
stretch，表示如果项目未设置尺寸，就让项目在交叉轴上占满所有空间
所有子元素项，垂直方向拉伸，默认沾满高度
概念：
容器
父元素
项目
多个子元素
主轴
子元素排列方向上的轴
默认从左向右
交叉轴
与主轴方向垂直的轴
默认从上到下
弹性布局就很好的解决了多种设备下自适应和灵活定制布局的目的
弹性布局主要定义父元素中子元素的布局方式，让布局能适用多种情况提供最大灵活性
float属性，的确可以实现根据显示设备大小，自动换行显示。但是，浮动定位float提供的可控制的属性太少了，以至于难于随心所欲的控制布局。
比如：多个元素浮动在一行中时，无法保证屏幕变小时，一行中的每个元素都自动等比例缩小。而是每个元素依然保持固定的宽度。就会导致，原本处在一行的元素，被挤压换行。
网页内容要可以随显示设备的大小而动态调整布局
0 条评论
下一页
