弹性盒子(Flex Box)
使元素永远排在一排:display:flex
改变主轴方向:flex-direction:row-reverse /column/column-reverse(从右到左/从上到下/取反)
弹性盒子换行:flex-warp:warp
元素位置:justify-content:center
:end
均分居中:space-around
靠边均分居中:space-between
交叉元素上的对齐方式:
元素靠下水平对齐:align-items:end
控制多行的对齐方式:align-content:space-around
顺序:order:00
设置 flex项主尺寸的flex增长系数:flex-grow:00
flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。:flex-shrink:00
设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。:flex:00
对齐到首端:align-self:flex-start
所有行在容器中平均分布,相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。:align-content:space-around
新的布局:display:grid;
我的日常笔记
最新推荐文章于 2024-06-13 18:31:56 发布