摘要：目录布局父项常见属性布局父项常见属性一一属性属性演示演示二二属性属性演示演示
flex-direction: 设置主轴方向，先设置谁为主轴，剩下的就是侧轴（主轴水平X轴，侧轴纵向Y轴）
justify-content: 设置主轴上的子元素排列方式
flex-wrap: 设置子元素是否换行
align-content: 设置侧轴上子元素的排列方式（多行）
align-items: 设置侧轴上的子元素排列方式（单行）
flex-flow: 合属性，相当于同时设置了flex-direction 和 flex-wrap
为避免引起歧义，下做演示效果的样式说明：
div { /* 给父级添加flex属性*/ display: flex; width: 600px; height: 300px; background-color: pink;}div span { width: 150px; height: 100px; background-color: purple; color: #fff; margin: 10px;}flex-direction: row(默认从左到右)------------重点
flex-direction: row-reverse(从右到左)
flex-direction: column(从上到下)-------------重点
flex-direction: column-reverse(从下到上)
演示如下：
flex-start(默认从头部开始，根据主轴)---------------重点
flex-end(从尾部开始排列)
center(在主轴居中对齐)----------------------------------重点
space-around(平分剩余空间)---------------------------重点
space-between(先两边贴边，在平分剩余空间)----重点
演示如下：
nowrap(默认不换行),
wrap(默认换行)-----------重点
演示如下：
flex-start(默认值在侧轴的头部开始排列)---------------------------------------------------重点
flex-end(在侧轴的尾部开始排列)
center(在侧轴中间显示)------------------------------------------------------------------------重点
space-around(子项在侧轴平分剩余空间)--------------------------------------------------重点
space-between(子项在侧轴先分布在两头，然后平分剩下的空间)
stretch(设置子项元素高度平分父元素高度)-----------------------------------------------重点
演示如下：
flex-start(从上到下)------------------------重点
flex-end(从下到上)
center(挤在一起居中，垂直居中)------重点
stretch(拉伸)--------------------------------重点
演示如下：
相当于同时设置了flex-direction 和 flex-wrap
演示如下：
1.必须给父项添加 display: flex; 属性
2.flex布局中 ，默认子元素不换行，如果放不下就会无限缩小子元素的宽度，放到父元素里面
3.justify-content: flex-end 要和 flex-direction: row-reverse 区分开（注意图解中子盒子的编号顺序）
4.align-content (多行)，不换行默认无效
5.使用 align-items: stretchs 时，子盒子不能给高度
生命不息，学习不止，键盘敲烂，月薪过万！加油，代码人
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/124509.html
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...
阅读 2028·2021-11-25 09:43
阅读 1061·2021-11-23 09:51
阅读 2270·2021-10-08 10:04
阅读 3157·2021-09-06 15:00
阅读 2625·2021-09-02 15:34
阅读 851·2021-08-16 10:57
阅读 1208·2019-08-30 12:46
阅读 825·2019-08-29 12:22
