flex的属性有：1、flex-direction，设置主轴的方向；2、justify-content，设置主轴上的子元素排列方式；3、flex-wrap，设置子元素是否换行；4、align-content，设置侧轴上的所有子元素排列方式；5、align-items ：设置侧轴上子元素自己的排列方式等等。
本教程操作系统：Windows10系统、Dell G3电脑。
flex的属性：
1、flex-direction
设置主轴的方向
属性值说明
row 默认值从左到右
row-reverse 从左到右
column 从上到下
column-reverse 从上到下
2、justify-content
设置主轴上的子元素排列方式
justify-content 属性定义了项目在主轴上的对齐方式
注意：使用这个属性之前一定要确定好主轴是那个
属性值说明
flex-start 默认值，从头部开始（如果主轴是X轴，则从左到右）
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴是X轴，则水平居中）
space-around 平分剩余空间
space-between 先两边贴边，再平分剩余空间（重要）
3、flex-wrap
设置子元素是否换行
默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的
属性值说明
nowrap 默认值，不换行
wrap 换行
4、align-content
设置侧轴上的子元素排列方式（多行）
属性值 说明
flex-start 默认值，在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴的中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，再平分剩余空间
5、align-items
设置侧轴上的子元素排列方式（单行）
属性值说明
flex-start 默认值，从上到下
flex-end 从下到上
center 挤在一起居中（垂直居中）
stretch 拉伸
6、flex-flow
flex-direction 和 flex-wrap 属性的复合属性
属性值说明
flex：子项目占的份数
align-self： 控制子项在自己侧轴的排列方式
order： 属性定义子项的排列顺序（前后顺序）
以上就是flex的属性有哪些的详细内容，更多请关注php中文网其它相关文章！
到此这篇flex布局和grid布局的主要属性（flex布局属性有哪些）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/36783.html