Flex 布局的小语法

最新推荐文章于 2024-08-21 17:46:40 发布

崔崔今天打代码了吗

最新推荐文章于 2024-08-21 17:46:40 发布

阅读量168

点赞数 7

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_65872420/article/details/126692992

版权

Flex 布局的小语法

布局的传统解决方案
一、Flex 布局是什么？
二、基本概念
三、容器的属性
四、其他的属性

布局的传统解决方案

由于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，例如，垂直居中很难实现。

一、Flex 布局是什么？

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

.box{
   display:flex;
}

行内元素也可以使用flex布局。

.box{
display:inline-flex;
}

注意设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称容器。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称项目。

三、容器的属性

以下6个属性设置在容器上。

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

将上述的父容器（container）属性 display属性设置为 flex 布局

.container{
            display:flex ;           
        }

3.1 flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。
有4个值。

3.1.1 水平主轴布局 row （水平向右）

在 父容器设置 flex-direction的值

flex-direction: row;

在这里插入图片描述
2. flex-direction: row-reverse; 延主轴反向

在这里插入图片描述

3.1.2 垂直侧轴布局 column （水平向下）

flex-direction: column;

在这里插入图片描述

flex-direction: column-reverse;

3.2 flex-wrap 属性，设置子元素是否换行

flex-wrap: nowrap; 默认不换行
flex-wrap: wrap; 会另起一行排列
默认情况下，flex 布局中默认是不换行的。如果排不下，会缩小盒子元素的宽度。

3.3 flex-flow复合属性,相当于同时设置了flex-direction和flex-wrap

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

3.4 Flex 中 justify-content 属性

这里把盒子的主轴设置为 row，如果想尝试多种效果的，可以自行修改主轴方向。

在这里插入图片描述

3.4.1 flex-start 左居中布局

给 父容器 justify-content 的属性设置为 flex-start。

 .container{
            display:flex ;
            flex-direction: row;
            justify-content: flex-start;
        }

在这里插入图片描述

3.4.2 flex-end 右居中布局

 .container{
            display:flex ;
            flex-direction: row;
            justify-content: flex-end;    
              }

在这里插入图片描述

3.4.3 center 水平居中布局

 .container{
            display:flex ;
            flex-direction: row;
            justify-content: center;     
              }

在这里插入图片描述

3.4.4 space-between 两端布局

 .container{
            display:flex ;
            flex-direction: row;
            justify-content:space-between ;     
              }

在这里插入图片描述

3.4.5 space-around （留空等分布局）环绕布局

 .container{
            display:flex ;
            flex-direction: row;
            justify-content:space-around ;     
              }

在这里插入图片描述

3.4.6 space-evenly 等间距布局

 .container{
            display:flex ;
            flex-direction: row;
            justify-content:space-evenly ;     
              }

在这里插入图片描述

3.5 align-items属性

首先，我们需要修改一下父容器的样式：
在这里插入图片描述
效果样式

3.5.1 使用 align-items 设置 flex-start

 .container{
            display:flex ;
            flex-direction: row;
            justify-content: center;
            align-items: flex-start;
            height: 300px;
            width: 800px;
            background-color: pink;
        }

在这里插入图片描述

3.5.2 使用 align-items 设置 center

 .container{
            display:flex ;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            height: 300px;
            width: 800px;
            background-color: pink;
        }

在这里插入图片描述
总结设置盒子水平，垂直居中（justify-content 和 align-items 都设置为 center）

3.5.3 使用 align-items 设置 flex-end 低端对齐

 .container{
            display:flex ;
            flex-direction: row;
            justify-content: center;
            align-items: flex-end;
            height: 300px;
            width: 800px;
            background-color: pink;
        }

在这里插入图片描述

3.5.4 使用 align-items 设置 baseline 第一行文字的基线对齐

.container{
            display:flex ;
            flex-direction: row;
            justify-content: center;
            align-items: baseline;
            height: 300px;
            width: 800px;
            background-color: pink;
        }

在这里插入图片描述