css:flex布局

目录

flex布局

flex布局父项的常见属性

flex-direction设置主轴的方向

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

flex-wrap设置子元素是否换行

align-items设置侧轴上的子元素排列方式(单行)

align-content设置侧轴上的子元素排列方式(多行)

flex-flow属性是flex-direction和flex-wrap属性的复合属性

子项flex布局


补一下之前没学的flex

flex布局

flex是flexible Box的缩写,表示弹性布局,用来为盒装模型提供最大的灵活度,任何一种容器都可以指定为flex布局

注意事项:

当我们为父盒子施加flex布局以后,子元素的float、clear和vertical-align属性都失效

伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素,叫flex容器,简称容器

它的所有子元素为容器成员,这些容器成员也被称为flex项目,简称项目

flex布局父项的常见属性

flex-direction设置主轴的方向

我们的元素一般是按照主轴来排列的

主轴和侧轴,也被称为行和列、x轴和y轴

一般默认主轴是x轴方向,水平向右;侧轴方向是y轴方向,水平向下

|----------------|---------|
| 属性值 | 说明 |
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |

初始:

从右到左:

从上到下和从下到上

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

这种方法可以达到居中对齐的效果

|---------------|-------------------------|
| 属性值 | 说明 |
| flex-start | 默认值,从头部开始,如果主轴是x轴,则从左到右 |
| flex-end | 从尾部排列 |
| center | 在主轴居中对齐(如果主轴是x轴则水平居中) |
| space-around | 平分剩余空间 |
| space-between | 两边贴边,剩余的项目平分剩余空间 |

css 复制代码
flex-direction:row;       
            justify-content: center;      
css 复制代码
flex-direction:row;       
            justify-content: space-between;   
css 复制代码
flex-direction:row;       
            justify-content: space-around;   

如果把主轴设置为y轴:

css 复制代码
flex-direction:column;       
            justify-content: space-around; 

解决盒子摆不开的问题:弹性布局会改变内部项目的大小和间距,来保证我们一定塞得下盒子

flex布局下,默认盒子是不换行的

如果想让盒子摆成两行:

flex-wrap设置子元素是否换行

|--------|---------|
| 属性值 | 说明 |
| nowrap | 默认值,不换行 |
| wrap | 换行 |

css 复制代码
justify-content: space-around;
            flex-wrap: wrap;

align-items设置侧轴上的子元素排列方式(单行)

|------------|-------------------------|
| 属性值 | 说明 |
| flex-start | 默认值,从头部开始,如果主轴是x轴,则从左到右 |
| flex-end | 从尾部排列 |
| center | 在主轴居中对齐(如果主轴是x轴则水平居中) |
| strech | 拉伸(默认值) |

上下左右都居中:

css 复制代码
 flex-direction: row;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
css 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            flex-direction: row;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items:stretch;
        }

        div span {
            width: 150px;
            /* height: 100px; */
            /* 子盒子不给高度,才能达到stretch的效果 */
            background-color: cadetblue;
        }
    </style>
</head>

<body>
    <!-- 补充:flex布局 -->
    <div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
</body>

</html>

如果改变主轴:

css 复制代码
flex-direction: column;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;

align-content设置侧轴上的子元素排列方式(多行)

设置子项在侧轴的排列方式,只适用多行,单行的时候没有效果

|---------------|-------------------------|
| 属性值 | 说明 |
| flex-start | 默认值,从头部开始,如果主轴是x轴,则从左到右 |
| flex-end | 从尾部排列 |
| center | 在主轴居中对齐(如果主轴是x轴则水平居中) |
| strech | 拉伸(默认值) |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头,再平分剩余空间 |

css 复制代码
  flex-direction: row;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
            align-content: space-between;

flex-flow属性是flex-direction和flex-wrap属性的复合属性

复合写法:

css 复制代码
flex-flow:column wrap

子项flex布局

flex属性定义子项目分配剩余看见,用flex表示占多少份数

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            /* 给父盒子一个flex */
            width: 800px;
            height: 100px;
            background-color: pink;
            flex-flow: row wrap;
        }

        div span:nth-child(1) {
            width: 150px;
            height: 100px;
            background-color: cadetblue;
        }

        div span:nth-child(2) {
            flex: 1;
            /* 左右的盒子各占自己的位置,中间的盒子占满剩下的位置 */
            /* height: 100px;不给高度*/
            background-color: rgb(187, 105, 146);
        }

        div span:nth-child(3) {
            width: 150px;
            height: 100px;
            background-color: rgb(214, 231, 165);
        }
    </style>
</head>

<body>
    <!-- 补充:flex布局 -->
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

还可以用flex把父盒子平均分成三份

css 复制代码
 div span:nth-child(1) {
            flex: 1;
            background-color: cadetblue;
        }

        div span:nth-child(2) {
            flex: 1;
            /* 左右的盒子各占自己的位置,中间的盒子占满剩下的位置 */
            /* height: 100px;不给高度*/
            background-color: rgb(187, 105, 146);
        }

        div span:nth-child(3) {
            flex: 1;
            background-color: rgb(214, 231, 165);
        }

给第二个盒子设置flex:2;2盒子占1/2的空间,剩下两个盒子各占1/4

align-self控制子项在自己侧轴上的排列方式

css 复制代码
 div span:nth-child(2) {
            width: 150px;
            height: 100px;
            background-color: rgb(187, 105, 146);
            align-self: flex-start;
        }

独立设置项目自己的排列方式

order属性定义项目的排列顺序

order里的数字越小越靠前,而z-index里的数字越在前面

默认的order:0;,我们设置为-1就可以改变排序

css 复制代码
order:-1;
相关推荐
LaoZhangAI44 分钟前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua44 分钟前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫
LaoZhangAI1 小时前
2025最全Cherry Studio使用MCP指南:8种强大工具配置方法与实战案例
前端
咖啡教室1 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
溪饱鱼1 小时前
Nuxt3能上生产吗?
前端
咖啡教室1 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
LaoZhangAI3 小时前
Claude MCP模型上下文协议详解:AI与外部世界交互的革命性突破【2025最新指南】
前端
LaoZhangAI3 小时前
2025最全Cursor MCP实用指南:15个高效工具彻底提升AI编程体验【实战攻略】
前端
Kagerou4 小时前
vue3基础知识(结合TypeScript)
前端
市民中心的蟋蟀4 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js