标签:比例 round 反转 ocs 控制 形式 basis ref around
伸缩布局
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。
a) display:flex:如果一个容器设置了这个属性,那么这个盒子里面的所有直接子元素都会自动的变成伸缩项(flex item)
b) justify-content: 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,语法:justify-content:flex-start | flex-end | center | space-between | space-around
c) flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。它用来设置或检索弹性盒模型对象的子元素排列方式,它的两种取值:flex-direction:定义弹性盒子元素的排列方向。flex-wrap:控制flex容器是单行或者多行。
2 row:主轴与行内轴方向作为默认的书写模式。即横向从左到右排列(左对齐)。
2 row-reverse:对齐方式与row相反。
2 column:主轴与块轴方向作为默认的书写模式。即纵向从上往下排列(顶对齐)。
2 column-reverse:对齐方式与column相反。
2 nowrap:flex容器为单行。该情况下flex子项可能会溢出容器
2 wrap:flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行
2 wrap-reverse:反转 wrap 排列。
d) flex属性:flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
2 语法:flex: [flex-grow] [flex-shrink] [flex-basis]:大多数情况下没必要使用这种语法,当使用flex缩写时,大多数情况下没必要使用这种语法
2 flex: [number]:这个语法指定了一个数字,代表了这个伸缩项目该占用的剩余空间比例
2 flex: auto:属性值被设为auto的伸缩项目,会根据主轴自动伸缩以占用所有剩余空间
标签:比例 round 反转 ocs 控制 形式 basis ref around
原文地址:https://www.cnblogs.com/bbc66/p/9434215.html