HTML-flex布局

最新推荐文章于 2024-07-14 17:05:44 发布

小贤的前端

最新推荐文章于 2024-07-14 17:05:44 发布

阅读量1k

点赞数 2

分类专栏： HTML CSS flex布局文章标签：大前端 flex

本文链接：https://blog.csdn.net/wen110898/article/details/119764414

版权

本文详细介绍了CSS中的Flex布局，包括容器属性如flex-direction、flex-wrap、justify-content、align-items等，以及元素属性如order、flex-grow、flex-shrink、flex-basis。Flex布局为前端开发提供了强大的页面布局能力，使得复杂布局的实现变得更加简单和灵活。

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

背景

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

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

Flex 是 Flexible Box 的缩写，意为"弹性布局"，也称为伸缩盒子。用来为盒状模型提供最大的灵活性。

flex布局是前端html，css中一个很重要的一个知识点，学好了flex布局，对你页面的布置有着很大的帮助，可以让你在页面布局方面如鱼得水。

flex：容器属性和元素属性

容器属性

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

元素属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

flex弹性盒模型

只要元素使用过了flex布局，那么我们就称为flex容器。而他所有的子元素也会自动成为容器成员，也就是flex项目。
任何一个容器都可以指定为 Flex 布局。
对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。
每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。
每根轴都有起点和终点，这对于元素的对齐非常重要。
弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。
弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。
弹性容器的两根轴非常重要，所有属性都是作用于轴的。

主轴

flex布局是一种一维布局模型，一次只能处理一个维度（一行或者一列）上的元素布局。

也就是说，flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。

我们可以在弹性容器上通过flex-direction修改主轴的方向。如果主轴方向修改了，那么：

交叉轴就会相应地旋转90度。
弹性元素的排列方式也会发生改变，因为弹性元素永远沿主轴排列。

容器属性

1. ## flex-direction属性

取值：row(默认) | row-reverse | column | column-reverse

用于控制项目排列方向与顺序，默认row，即横向排列，项目排列顺序为正序1-2-3；row-reverse同为横向排列，但项目顺序为倒序3-2-1。

column 与row相反，为纵向排列，项目顺序为正序1-2-3，column-reverse同为纵向排列，项目顺序为倒序3-2-1。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
     
      margin: 0;
      padding: 0;
    }

    /* 父容器设置样式 */
    .container {
     
      width: 400px;
      height: 400px;
      background-color: pink;
      margin: 100px auto;
      /* 伸缩盒布局 display我们是在父容器中进行声明的 */
      display: flex;
      /* 主轴方向设置 */
      /* 水平方向 从左至右 */
      /* flex-direction: row; */
      /* 垂直方向 */
      /* flex-direction: column; */
      /* 反方向 */
      /* 从右至左 */
      /* flex-direction: row-reverse; */
      /* 从下至上 */
      flex-direction: column-reverse;
    }

    div {
     
      width: 60px;
      height: 60px;
      color: white;
    }
  </style>
</head>

<body>
  <!-- 父容器 -->
  <div class="container">
    <div class="div1" style="background-color: red;">弹性元素1</div>
    <div class="div2" style="background-color: blue;">弹性元素2</div>
    <div class="div3" style="background-color: cyan;">弹性元素3</div>
  </div>
</body>

</html>

效果图

flex-wrap属性

弹性元素永远沿主轴排列，但是当主轴排列不下去了怎么办？这时候我们就该使用flex-wrap属性
通过设置flex-wrap属性可使得主轴上的元素不换行、换行、反向换行。

取值：nowrap(默认) | wrap | wrap-reverse

用于控制项目是否换行，nowrap表示不换行；

举个例子：比如容器宽度为300px，容器中有6个宽度为60px的元素，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目实际宽度也就只有50px了，而非我们自己设置的60px。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }

        /* 父容器设置样式 */
        .container {
     
            width: 300px;
            height: 200px;
            background-color: pink;
            /* 上下100，左右自适应 */
            margin: 100px auto;
            /* 伸缩盒布局  display: flex;是在父元素设置的*/
            display: flex;
            /* 默认flex-direction:row */
            /* 控制主轴方向上是否换行 默认 nowrap*/
            /* flex-wrap: nowrap; */

            flex-wrap: wrap; 
            /* 设置为换行之后，宽度改变，300/6=50px */
        }   

        div {
     
            width: 60px;
            height: 60px;
            color: white;
        }
    </style>
</head>

<body>
    <!-- 父容器 -->
    <div class="container">
        <div class="div1" style="background-color: red;">弹性元素1</div>
        <div class="div2" style="background-color: blue;">弹性元素2</div>
        <div class="div3" style="background-color: cyan;">弹性元素3</div>
        <div class="div4" style="background-color: red;">弹性元素4</div>
        <div class="div5" style="background-color: blue;">弹性元素5</div>
        <div class="div6" style="background-color: cyan;">弹性元素6</div>

    </div>
</body>

</html>

最低0.47元/天解锁文章

小贤的前端

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML-flex布局

flex布局背景布局的传统解决方案，基于盒模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex 是 Flexible Box 的缩写，意为"弹性布局"，也称为伸缩盒子。用来为盒状模型提供最大的灵活性。flex布局是前端h
复制链接

扫一扫

专栏目录