移动端常用布局之flex布局

最新推荐文章于 2024-08-09 15:37:57 发布

pumpkin_truck

最新推荐文章于 2024-08-09 15:37:57 发布

阅读量449

点赞数

文章标签： css html flex

本文链接：https://blog.csdn.net/pumpkin_truck/article/details/112251305

版权

flex布局

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局
采用 Flex 布局的元素，称为 Flex 容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称"项目"。
总结来说就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
操作方便，布局极其简单，移动端使用比较广泛
pc端浏览器支持情况比较差
IE11或更低版本不支持flex或仅支持部分

父项常见属性（设置在父元素上的属性）

*** flex-direction：设置主轴的方向（x 轴和y 轴）***
取值有：
在这里插入图片描述下面来看看结构如下的元素通过设置其的flex-direction会变成什么样

<!-- 父元素 -->
    <ul class="box">
        <li>1</li>
        <li>2</li>
    </ul>

flex-direction为row时：

 .box {
            width: 300px;
            height: 200px;
            margin: 50px auto;
            display: flex;
            flex-direction: row;
            border: 1px solid red;
        }

在这里插入图片描述
flex-direction:row-reverse时 ;
此时不光两个盒子向右排列，且1和2的顺序也进行了变化

在这里插入图片描述 flex-direction:column时
沿y轴方向排列

在这里插入图片描述 flex-direction:column-reverse与flex-direction:row-reverse用法相似。

所以看到需要子盒子并排排列，这儿我们是不是想到了可以用它代替我们的浮动（float）呢，还可以避免有些同学不会清除浮动，从而影响布局。

justify-content 设置主轴上的子元素排列方式

取值为：

在这里插入图片描述应用：可以设置上图中图片和文字在主轴居中对齐，因为text-align：center只能设置文本居中。而它可以让图片文字排列方式相同。

flex-wrap：设置子元素是否换行
flex布局中默认是不换行的。 nowrap 不换行 wrap 换行
当不设置flex-wrap：wrap时，不管你有多少个子盒子，它都不会换行，此时你给子盒子设置的宽度是无效的，如图：
在这里插入图片描述
它会自动将子盒子进行缩短，但始终不会去下一行。

align-content：设置侧轴上的子元素的排列方式（多行）：
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。
align-items：设置侧轴上的子元素排列方式（单行）：
该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项（单行）的时候使用
两个的取值都为：
在这里插入图片描述