文章目录
怎么使用flex
flex是Flexible Box的缩写，又可以叫”弹性布局”，用来为盒状模型提供最大的灵活性，任何元素都可以使用flex布局
在父元素中使用display属性，取值可以为flex或者inline-flex
注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效
flex和inline-flex的区别
flex：将对象作为弹性伸缩盒显示。
inline-flex：将对象作为内联块级弹性伸缩盒显示。
flexBox中的各个属性
-
控制主轴方向：可控制盒子在父盒子中是按水平方向还是按垂直方向
属性：flex-direction
属性值： row（默认值，行，从左往右）， row-reverse （行，从右往左） ， column （列，从上往下） ， column-reverse （列，从下往上） -
主轴上子项的对齐方式
属性：justify-content
属性值： center（居中） ， flex-start （默认左对齐）， flex-end（右对齐） ， space-around（每个子盒子两侧的间隔相同，子盒子之间的间隔比子盒子与边框的间隔大一倍。） ， space-between （两端对齐，子盒子之间的间隔都相等） -
侧轴上子项对齐方式
属性：align-items
属性值： stretch（默认值，若子盒子未设置高度或设为auto，将占满整个容器的高度） ， flex-start （和父盒子的起点对齐） ， flex-end （和父盒子的终点对齐）， center （在父盒子内居中） ， baseline （子盒子的第一行文字的基线对齐） -
用于指定子项是否换行
属性： flex-wrap
属性值： Nowrap（默认，不换行） ，wrap（换行并且第一行在上方） ，wrap-reverse（换行但第一行在下方） -
侧轴多行对齐方式：多根轴线的对齐方式（同主轴上子项的对齐方式）
属性：align-content
属性值：center ， flex-start ， flex-end -
单独指定某flex子项的对齐方式（主轴上子项的对齐方式）
属性： align-self
属性值：stretch ， flex-start ， flex-end ，center （取值和侧轴上子项对齐方式一样）
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
