Flex布局的12个属性及取值

最新推荐文章于 2021-09-01 18:41:00 发布

浅端

最新推荐文章于 2021-09-01 18:41:00 发布

阅读量876

点赞数

分类专栏： CSS学习文章标签： css

本文链接：https://blog.csdn.net/qq_40686529/article/details/103943574

版权

本文详细介绍了Flex布局，包括容器的六个属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content，以及项目的六个属性：order、flex-grow、flex-shrink、flex-basis、flex和align-self。通过这些属性，可以实现项目在主轴和交叉轴上的灵活对齐和布局。

摘要由CSDN通过智能技术生成

Flex布局：“弹性布局”，为盒状模型提供最大的灵活性。
一、任何一个容器都可以指定为Flex布局，行内元素也可以使用(使用Flex布局后，子元素的float,clear,vertical-align属性都将失效)。
二、Flex布局的基本概念。
2.1. 外层元素称为容器，容器的子元素称为项目。
2.2. 容器默认存在两根轴，水平的称为主轴，垂直的称为交叉轴。项目默认主轴排列
在这里插入图片描述
三、容器的六个属性：
① flex-direction (主轴项目的排列方向): row(水平，起点在左端) | row-reverse(水平，起点在右端) | column(垂直，起点在上沿) | column-reverse(垂直，起点在下沿)。
② flex-wrap(轴线排不下项目时如何换行)：nowrap(不换行) | wrap(换行，第一行在上方) | wrap-reverse(换行，第一行在下方)。
③ flex-flow(是flex-direction和flex-wrap的简写形式)：默认值 row nowrap。
④ justify-content(项目在主轴的对齐方式)：flex-start(左对齐) | flex-end(右对齐) | center( 居中) | space-betwee