CSS3弹性盒子flex布局

程序员buddha2080

已于 2023-01-13 18:10:45 修改

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签：弹性盒子 flex布局弹性盒子flex布局盒子模型

于 2022-04-27 17:34:33 首次发布

本文链接：https://blog.youkuaiyun.com/rulaixiong/article/details/124455830

css 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了CSS中的盒子模型，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。接着，探讨了弹性盒子(flex布局)的概念，展示了如何通过flex-direction、justify-content、align-items、flex-wrap和align-content等属性来控制子元素的排列方式。此外，还讲解了子元素的flex属性、order属性和align-self属性，帮助实现更灵活的布局设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

代码前提

基础代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>box</title>
        <style type="text/css">
            .box {
                margin: 0 auto;
                width: 480px;
                height: 480px;
                border: 3px solid red;
            }

            .box .item {
                width: 120px;
                height: 120px;
            }

            .item:nth-child(1) {
                background-color: #F92672;
            }

            .item:nth-child(2) {
                background-color: #78943A;
            }

            .item:nth-child(3) {
                background-color: #66D9EF;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </body>
</html>

浏览器显示效果如下：
在这里插入图片描述

flex布局要写的属性位置如下图所属

在这里插入图片描述

开启flex布局

display: flex;

flex-direction定义主轴排列

flex-direction：
      row            主轴为水平方向，起点在左端
      row-reverse    主轴为水平方向，起点在右端
      column         主轴为垂直方向，起点在上面
      column-reverse 主轴为垂直方向，起点在下面

flex-direction：row 主轴为水平方向，起点在左端
在这里插入图片描述
flex-direction: row-reverse 主轴为水平方向，起点在右端

flex-direction: column 主轴为垂直方向，起点在上面

flex-direction: column-reverse 主轴为垂直方向，起点在下面

flex-wrap 子项一行放不下时，是否换行

flex-wrap:
      nowrap        不换行，默认
      wrap          换行
      wrap-reverse  逆向换行

flex-wrap: nowrap 默认属性值，不换行
在这里插入图片描述
flex-wrap: wrap 换行

flex-wrap: wrap-reverse 逆向换行

justify-content 子项在主轴对齐方式

justify-content
         flex-start       默认，左对齐或者上对齐
         flex-end         右对齐或者下对齐
         center           居中
         space-around     两端对齐，间距相等，不贴边
         space-between    两端对齐，中间间隔相等，贴边

justify-content: flex-start 默认属性值，左对齐或上对齐
在这里插入图片描述

justify-content: flex-end 右对齐或下对齐

justify-content: center 主轴方向居中

justify-content: space-around 主轴方向两端对齐，子项间间距相等，不贴边

justify-content: space-between 主轴方向两端对齐，子项间间距相等，贴边
在这里插入图片描述

align-items子项在主轴垂直方向的排列顺序

align-items
         flex-start       默认，左面或上面
         flex-end        右对齐或者下对齐
         center           居中
         stretch          拉伸

align-items: flex-start 默认属性值，左面或者上面
在这里插入图片描述
align-items: flex-end 下面或右面

align-items: center 主轴垂直方向上居中

align-items: stretch 子项没有设置高度时才生效

align-conetnt主轴垂直方向的排列方式（多行子项）

align-conetnt
         flex-start       在侧轴的头部开始排序；默认值
         flex-end         在侧轴尾部开始排序
         center           在侧轴中间显示
         space-around     子项在侧轴平分剩余的空间
         space-between    子项在侧轴先分布在两端，再平分剩余空间
         stretch          设置子项高度且平分父元素高度