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