CSS-实用、又简便的flex布局！！一篇掌握！！

最新推荐文章于 2024-02-12 22:19:08 发布

半糖冰

最新推荐文章于 2024-02-12 22:19:08 发布

阅读量1.4k

点赞数 8

文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_57269725/article/details/120555256

版权

3.2 justify-content属性

一、历史问题及flex的问世

1、布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2、2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

二、flex布局的基本概念

1、flex布局

即“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。（即使是行内元素依旧可以用）

以如下为例子，没有添加属性之前


        .box {
            border:1px solid black;
            width: 800px;
            height: 400px;
            margin: 100px auto;
        }

        li {
            list-style: none;
            width: 200px;
            height: 200px;
            background-color: coral;
        }

<body>
    <div class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </div>
</body>

添加属性之后

.box{
  display: flex;
}

2、详解flex布局属性

2.1 flex 原理

即添加display:flex;语句的元素其子元素自动成为这个父亲的“flex容器成员”

2.2 内部结构（重点！）

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

三、容器属性

3.常见的设置在该容器的属性：

* flex-direction
* justify-content
* align-items
* align-content
* flex-wrap
* flex-flow

3.1 flex-direction属性

flex-direction属性决定主轴的方向，默认值水平向右（row），我们常用的就是改为垂直向下（column ）

.box {
  flex-direction: column;
}

效果如下图：

3.2 justify-content属性

justify-content属性定义了元素在主轴上的对齐方式。

我们常用以下三个属性从上至下依次为①居中、②两端对齐、③元素之间的间隔都相等、每个元素两侧的间隔相等。所以，之间的间隔比元素与边框的间隔大一倍。

.box {
  justify-content: center 
  justify-content: space-between 
  justify-content: space-around;
  justify-content: space-evenly;
}

space-around属性值

spac-between值

spacce-evenly值

3.3 align-items属性

align-items属性定义了元素在侧轴方向的对齐方式。

以如下布局为例

.box {
            border:1px solid black;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            display: flex;
            justify-content: space-evenly;
        }

        li {
            list-style: none;
            width: 100px;
            height: 100px;
            background-color: coral;
        }

<div class="box">
        <li></li>
        <p>文段文段文段</p>
    </div>

常用属性值 center居中对齐还有 stretch （默认值）如果子元素未设置高度或设为auto，将占满整个容器的高度。

.box {

  align-items: flex-start;
  align-items: flex-end;
  align-items: center ;
  align-items: stretch;
}

摘取其中例子展示

center值

所以加了沿主轴对齐的方式的效果如图：

3.4 align-content属性

align-content属性定义了多个元素在多个主轴的对齐方式。可以通俗的理解为沿侧轴的对齐方式。

常用属性值有 center 居中对齐等（即在沿侧轴的方向上与justify-content属性有着相同的属性值）

.box {
  align-content: space-between;
  align-content: space-around;
  align-content: center;
}

3.5 flex-wrap属性

默认子元素都排在一条线（又称”轴线”）上。如果一条轴线排不下，用flex-wrap实现换行方式。

常用属性值有三个：nowrap不换行（默认值）、wrap换行、wrap-reverse换行，第一行在下方。

.box{
  flex-wrap: nowrap;
  flex-wrap: wrap;
  flex-wrap: wrap-reverse;
}

以本文第一个例子举例

wrap值

3.6 flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

常用属性值为（column wrap）、（row wrap）等

.box {
  flex-flow:  row wrap;
}

效果如图

3.7 align-self属性

以四个子元素布局为例子

.box {
            border:1px solid black;
            width: 400px;
            height: 200px;
            margin: 100px auto;
            display: flex;
        }

        li {
            list-style: none;
            width: 100px;
            height: 100px;
            background-color: coral;
        }

<div class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </div>

未书写之前

align-self属性作用在子元素上，即改变单个子元素沿侧轴上的对齐方式，可以对align-item属性进行覆盖。

常用的属性值有五个和flex-item的属性值基本相同，不过他是作用在单个子元素上

.item {
  align-self: auto;
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: baseline;
}

取其中几个属性值展示效果

center值

.box li:nth-child(2) {
            align-self: center;
        }

.box li:nth-child(2) {
            align-self:center;
        }
        .box li:nth-child(4) {
            align-self: flex-end;
        }

四、结束语

希望本篇文章可以帮到求知若渴的众多同学

若能帮到也欢迎点赞、收藏、关注我，后续也会持续发布新文章，祝大家学有所成！

欢迎各位前端大佬留言讨论指教！谢谢各位~

半糖冰

关注

8
点赞
踩
29

收藏

觉得还不错? 一键收藏
3
评论
CSS-实用、又简便的flex布局！！一篇掌握！！

目录一、历史问题及flex的问世二、flex布局的基本概念1、flex布局2、详解flex布局属性三、容器属性3.常见的设置在该容器的属性：3.1 flex-direction属性3.2 justify-content属性3.3 align-items属性3.4 align-content属性3.5 flex-wrap属性3.6 flex-flow属性3.7 align-self属性四、结束语一、历史问题及flex的问世1、布局的..
复制链接

扫一扫