cssFlex

CSS Flex

pubdate: 2019-06-05 14:45:32
tags: css,index
感谢 flex
css 弹性盒子
一个 flex 布局查看效果的网站
CSS flex 属性深入理解 这篇文章还讲解了 CSS 语法怎么读和使用
html{run}
1
2
3
4
5
6
7
justify-content 实验场,align-content 只是换了一个轴向
css{run}
.flex { color: white; display: flex; /* ## Positional alignment ## */ /** 居中排列 */ /* justify-content: center; */ /** Pack items from the start */ /* justify-content: start; */ /** Pack items from the end */ /* justify-content: end; */ /** 从行首起始位置开始排列 */ /* justify-content: flex-start; */ /** 从行尾位置开始排列 */ /* justify-content: flex-end; */ /** Pack items from the left */ /* justify-content: left; */ /** Pack items from the right */ /* justify-content: right; */ /* ## Baseline alignment ## */ /* justify-content: baseline; justify-content: first baseline; justify-content: last baseline; */ /* ## Distributed alignment ## */ /** 均匀排列每个元素 首个元素放置于起点,末尾元素放置于终点 */ /* justify-content: space-between; */ /**💕 均匀排列每个元素 每个元素周围分配相同的空间,注意左右两边只有中间的一半 */ /* justify-content: space-around; */ /**❤🌹 均匀排列每个元素 每个元素之间的间隔相等 完美的间距 */ /* justify-content: space-evenly; */ /** Distribute items evenly Stretch 'auto'-sized items to fit the container */ /* justify-content: stretch; */ /* ## Overflow alignment ## */ /* justify-content: safe center; */ /* justify-content: unsafe center; */ /* ## Global values ## */ /* justify-content: inherit; */ /* justify-content: initial; */ /* justify-content: unset; */ } .flex div { background-color: saddlebrown; }

布局

最后一行靠左 推荐空元素占位法