共计 2537 个字符，预计需要花费 7 分钟才能阅读完成。
flex 布局
原文链接：https://note.noxussj.top/?source=zhihu
为什么要应用 flex 布局？
flex 布局是目前比拟风行的一种布局，因为它非常简略灵便，区区简略几行代码就能够实现各种页面的的布局，以前我在学习页面布局的时候我深受其 float、display、position 这些属性的困扰。应用 flex 属性就能够写出简洁优雅简单的页面布局。先大略看一下我上面写的内容，而后再去看看阮一峰老师写的 Flex 布局教程
- 提醒
- 容器：采纳 flex 布局的元素，称为容器。
- 我的项目：指的是容器外面的子元素。
容器的 6 个属性
flex-direction
属性决定主轴的方向（即我的项目的排列方向）。
flex-direction: row（默认）主轴为程度方向，终点在左端。
flex-direction: row-reverse 主轴为程度方向，终点在右端。
flex-direction: column 主轴为垂直方向，终点在上沿。
flex-direction: column-reverse 主轴为垂直方向，终点在下沿。
flex-wrap
主轴的换行形式。
flex-wrap: nowrap（默认）当我的项目总宽度超出容器的宽度时，不进行换行并且对我的项目的宽度进行对立压缩
。
flex-wrap: wrap 换行，第一行在上方。
flex-wrap: wrap-reverse 换行，第一行在下方。
flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的简写模式。
flex-flow: row nowrap（默认）
justify-content
我的项目在主轴上的对齐形式。
justify-content: flex-start（默认）左对齐。
justify-content: flex-end 右对齐。
justify-content: center 居中。
justify-content: space-between 两端对齐，我的项目之间的间距都相等。
justify-content: space-around 也属于两端对齐，我的项目之间的间距都相等，然而容器的两侧有一个间距，刚好是我的项目之间间距的一半。
align-items
我的项目在穿插轴上的对齐形式。
align-items: stretch（默认），我的项目铺满整个穿插轴高度。
align-items: flex-start 顶部对齐，也就是与穿插轴的终点对齐。
align-items: flex-end 底部对齐，也就是与穿插轴的起点对齐。
align-items: center 垂直居中对齐，也就是穿插轴的中心点对齐。
align-items: baseline 我的项目的第一行文字的基线对齐。
align-content
align-items 个别是指单根轴线的对齐形式，也就是只有一行内容。而 align-content 则是多根轴线的对齐形式。
留神
如果我的项目只有一根轴线，该属性不会起任何作用。
align-content: stretch（默认），每一行我的项目的高度都会平分穿插轴的高度。
align-content: flex-start 顶部对齐，也就是与穿插轴的终点对齐。
align-content: flex-end 底部对齐，也就是与穿插轴的起点对齐。
align-content: center 垂直居中对齐，也就是穿插轴的中心点对齐。
align-content: space-between 两端对齐，我的项目之间的间距都相等。
align-content: space-around 也属于两端对齐，我的项目之间的间距都相等，然而容器的两侧有一个间距，刚好是我的项目之间间距的一半。
我的项目的 6 个属性
order
我的项目的排列程序，数值越小越靠前，默认为 0。
别离给三个我的项目设置 order: 3 order: 2 order: 1
flex-grow
我的项目的放大比例。默认为 0（代表即便存在残余空间也不放大）。如果所有我的项目的 flex-grow 属性都为 1，则它们会等比调配残余空间。
别离给三个我的项目设置 flex-grow: 1 flex-grow: 1 flex-grow: 1
别离给三个我的项目设置 flex-grow: 1 flex-grow: 2 flex-grow: 1，假如一个我的项目的 flex-grow 属性为 2，其余都为 1，则前者占据的残余空间将会比其余我的项目多一倍。
flex-shrink
我的项目的放大比例，默认为 1（代表如果空间有余，该我的项目将放大）。
别离给三个我的项目设置 flex-shrink: 1 flex-shrink: 0 flex-shrink: 1。假如一个我的项目的 flex-shrink 属性为 0，其余我的项目都为 1，则空间有余时，前者不放大。
flex-basis
在调配多余空间之前，提前计算我的项目占据的主轴空间。默认为 auto（代表我的项目自身的大小）。
别离给三个我的项目设置 flex-basis: 350px flex-grow: 1 flex-grow: 1。假如一个我的项目的 flex-basis 属性为 350px，其余都为 auto，则前者占据固定空间，不进行调配残余空间。成果其实和给它设置 width: 350px 或 height: 350px 成果统一。
flex
flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写
flex-flow: 0 1 auto（默认）
align-self
align-self 属性容许单个我的项目有与其余我的项目不一样的对齐形式，可笼罩容器的 align-items 属性，默认值为 auto，示意继承父级元素的 align-items 属性，如果没有父级元素，则等同 stretch。
给三个我的项目设置 align-self: flex-start align-self: flex-end align-self: flex-start。
最全面的前端笔记来啦，蕴含了入门到入行的笔记，还反对实时成果预览。小伙伴们不须要再花工夫去写笔记，或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和 PC 端浏览，深色和浅色模式。
原文链接：https://note.noxussj.top/?source=zhihu