flex布局属性详解&&基于flex的单元素，整体元素居中方法&&代码示例

最新推荐文章于 2024-04-16 10:29:00 发布
最新推荐文章于 2024-04-16 10:29:00 发布
阅读量3.3k 收藏 5
点赞数 2
分类专栏： 前端开发 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/invalid_oath/article/details/122027283
版权

CSS-flex布局属性详解

一. 基本属性以及代码示例

1.父元素属性

(1) 为父元素添加display 属性，值为flex

通过display: flex;启动flex容器布局。
容器作用：可以让子元素的项目排列成行或列。
代码展示：

<style>
  #box-container {
    height: 500px;
    display: flex;/* 要想使用flex弹性盒子包裹子元素, 父元素必须有这一句语法*/
  }

  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

(2) flex-direction 属性（改变子元素排列方式）

属性作用：让包裹在容器内的子元素排列成行或列。

属性值作用：
flex-direction的可选值有：row | column | row-reverse | column-reverse , 默认值为 row。

row: 横向排列它(父元素)的所有子元素（从左到右对齐）
row-reverse: 横向排列它(父元素)的所有子元素（从右到左对齐）
column : 纵向排列它(父元素)的所有子元素（从上到下对齐）
column-reverse : 纵向排列它(父元素)的所有子元素（从下到上对齐）

代码实现：

<style>
  #box-container {
    height: 500px;
    display: flex;/* 要想使用flex弹性盒子包裹子元素, 父元素必须有这一句语法*/
    flex-direction: row-reverse;
  }

  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

这是flex-direction值为row的情况：在这里插入图片描述
这是flex-direction值为row-reverse的情况：
在这里插入图片描述
这是flex-direction值为column的情况：
在这里插入图片描述
这是flex-direction值为column-reverse的情况：
在这里插入图片描述

(3) justify-content 属性（改变子元素沿主轴对齐方式）

属性作用：将子元素沿着弹性容器的主轴线（main axis）对齐。 子元素排列的方向被称为 main axis（主轴）。

属性值作用：
justify-content的可选值有：flex-start | flex-end | space-between | space-around | space-evenly | center，默认值为flex-start。

flex-start : 从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。
flex-end : 从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边， 对于列是把项目移至底部。
space-between : 项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。
space-around : 与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
space-evenly : 头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
center : flex 子元素在 flex 容器中居中排列。

注意：示例都以行为默认基准。

代码实现：

<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    display-direction: row;
    justify-content: center;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1" style="font-size: 100px">1</div>
  <div id="box-2" style="font-size: 100px">2</div>
</div>

这是justify-content值为flex-start的情况：
在这里插入图片描述

这是justify-content值为flex-end的情况：
在这里插入图片描述

这是justify-content值为space-between的情况：
在这里插入图片描述
这是justify-content值为space-around的情况：
在这里插入图片描述
这是justify-content值为space-evenly的情况：
在这里插入图片描述
这是justify-content值为center的情况：
在这里插入图片描述

(4) align-items 属性（定义 flex 子元素沿交叉轴的对齐方式）

属性作用：用来定义 flex 子元素沿交叉轴的对齐方式。与主轴垂直的叫做 cross axis（交叉轴）。行的交叉轴是垂直的，列的交叉轴是水平的。 对行来说，定义的是元素的上下(纵向)对齐方式； 对列来说，是定义元素的左右（横向）对齐方式。

属性值作用：
align-items的可选值有：flex-start | flex-end | center | stretch | baseline，默认值为stretch。

flex-start : 从 flex 容器的起始位置开始对齐项目。 对行来说，把项目移至容器顶部； 对列来说，是把项目移至容器左边。
flex-end : 从 flex 容器的终止位置开始对齐项目。 对行来说，把项目移至容器底部； 对列来说，把项目移至容器右边。
center : 把项目居中放置。 对行来说，垂直居中（项目距离顶部和底部的距离相等）； 对列来说，水平居中（项目距离左边和右边的距离相等）。
stretch : 拉伸项目，填满 flex 容器。 例如，排成行的项目从容器顶部拉伸到底部。 如未设置align-items的值，那么这就是默认值。
baseline : 沿基线对齐。 基线是文本相关的概念，可以认为它是字母排列的下端基准线。如弹性盒子元素的行内轴与侧轴(纵轴)为同一条，则该值与flex-start等效。

注意：示例都以行为默认基准。

代码实现：

<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    /* align-items: flex-start; */
  }
  #box-1 {
    background-color: dodgerblue;
    width: 200px;
  }

  #box-2 {
    background-color: orangered;
    width: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1" style="font-size: 100px">1</div>
  <div id="box-2" style="font-size: 100px">2</div>
</div>

这是未加入属性的情况（因为默认属性值为stretch）：
在这里插入图片描述

这是align-items值为flex-start的情况：
在这里插入图片描述
这是align-items值为flex-end的情况：
在这里插入图片描述
这是align-items值为center的情况(垂直对齐)：
在这里插入图片描述
这是align-items值为stretch的情况：
在这里插入图片描述
这是align-items值为baseline的情况：
在这里插入图片描述

(5) flex-wrap 属性（指定子元素换行方式）

属性作用：用于指定弹性盒子的子元素换行方式。为什么有这么一个属性呢？因为 flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。 默认情况下，flex 容器会调整项目大小，把它们都塞到一起。 对于行来说，所有项目都会在一条直线上。

属性值作用：
flex-wrap的可选值有：nowrap | wrap | wrap-reverse，默认值为nowrap。

nowrap : 默认值，不换行。
wrap : 如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。
wrap-reverse : 如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列。

注意：示例都以行为默认基准。

代码实现：

<style>
  * {
    font-size: 50px;
  }
  #box-container {
    background: gray;
    display: flex;
    height: 100%;
	/* flex-wrap: wrap; */
  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 50%;
  }
  #box-3 {
    background-color: violet;
    width: 25%;
    height: 50%;
  }
  #box-4 {
    background-color: yellow;
    width: 25%;
    height: 50%;
  }
  #box-5 {
    background-color: green;
    width: 25%;
    height: 50%;
  }
  #box-6 {
    background-color: pink;
    width: 25%;
    height: 50%;
  }
</style>

<div id="box-container">
  <div id="box-1">1</div>
  <div id="box-2">2</div>
  <div id="box-3">3</div>
  <div id="box-4">4</div>
  <div id="box-5">5</div>
  <div id="box-6">6</div>
</div>

这是不设置属性的情况（默认值为nowrap的情况）：
在这里插入图片描述
这是flex-wrap值为wrap的情况：
在这里插入图片描述
这是flex-wrap值为wrap-reverse的情况：
在这里插入图片描述

2.子元素属性

(1) flex-shrink 属性（收缩子元素）

属性作用：根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。使用之后，如果 flex 容器太小，则子元素会自动缩小。 当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。子元素的 flex-shrink 接受数值作为属性值。 数值越大，则该元素与其他元素相比会被压缩得更厉害。比如，一个项目的 flex-shrink 属性值为 1，另一个项目的 flex-shrink 属性值为 3，那么后者相比前者会受到 3 倍压缩，示例情况如下图。

属性值作用：
flex-shrink的可选值为：number（一个数值），但是不允许为负数，默认值为1。

注意：示例都以行为默认基准。

代码实现：

<style>
  * {
    font-size: 100px;
  }
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 100%;
    height: 200px;
    flex-shrink: 1;
  }

  #box-2 {
    background-color: orangered;
    width: 100%;
    height: 200px;
    flex-shrink: 3;
  }
</style>

<div id="box-container">
  <div id="box-1">1</div>
  <div id="box-2">2</div>
</div>

代码示例情况：

在这里插入图片描述

(2) flex-grow 属性（增大子元素）

属性作用：根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
flex-grow 会在容器太大时对子元素作出调整。例子与flex-shrink的相似，如果一个项目的 flex-grow 属性值为 1，另一个项目的 flex-grow 属性值为 3，那么值为 3 的一个会较另一个扩大 3 倍，示例情况如下图。

属性值作用：
flex-grow的可选值为：number（一个数值），但是不允许为负数，默认值为0。

注意：示例都以行为默认基准。

代码实现：

<style>
  * {
    font-size: 100px;
  }
  #box-container {
    display: flex;
    height: 500px;
  }

  #box-1 {
    background-color: dodgerblue;
    height: 200px;
    flex-grow: 1;
  }

  #box-2 {
    background-color: orangered;
    height: 200px;
    flex-grow: 2;
  }
</style>

<div id="box-container">
  <div id="box-1">1</div>
  <div id="box-2">2</div>
</div>

代码示例情况：

在这里插入图片描述

(3) flex-basis 属性（设置子元素的初始大小）

属性作用：定义了在使用 CSS 的 flex-shrink 或 flex-grow 属性对元素进行调整前，元素的初始大小。例如，设置 #box-1 的尺寸初始值为 10em，#box-2 的尺寸初始值为 20em。

属性值作用：
flex-basis的可选值为：<length>(px/em) | <percentage>(%) | auto | content（一个数值），默认值为auto。

注意：示例都以行为默认基准。

代码实现：

<style>
  * {
    font-size: 100px;
  }
  #box-container {
    display: flex;
    height: 500px;
  }

  #box-1 {
    background-color: dodgerblue;
    height: 200px;
    flex-basis: 10em;
  }

  #box-2 {
    background-color: orangered;
    height: 200px;
    flex-basis: 20em;
  }
</style>

<div id="box-container">
  <div id="box-1">1</div>
  <div id="box-2">2</div>
</div>

代码示例情况：

在这里插入图片描述

(4) order 属性（设置子元素的排列顺序）

属性作用：用整数值来定义排列顺序，数值小的排在前面。

属性值作用：
order的可选值为：<integer>（一个整数数值），默认值为0，可以为负值。例如，设置 #box-1 的值为 2，#box-2 的值为 1。

注意：示例都以行为默认基准。

代码实现：

<style>
  * {
    font-size: 100px;
  }
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    order: 2;
    height: 200px;
    width: 200px;
  }

  #box-2 {
    background-color: orangered;
    order: 1;
    height: 200px;
    width: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1">1</div>
  <div id="box-2">2</div>
</div>

代码示例情况：

在这里插入图片描述

(5) align-self 属性（调整单个子元素自己的对齐方式）

属性作用：调整单个子元素自己的对齐方式，而不会影响到全部子元素。

属性值作用：
align-self的可选值为：auto | flex-start | flex-end | center | baseline | stretch，默认值为auto。

auto： 如果align-self的值为auto，则其计算值为元素的父元素的align-items值，如果其没有父元素，则计算值为stretch。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end： 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center： 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制。

注意：示例都以行为默认基准。

代码实现：

<style>
  * {
    font-size: 100px;
  }
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    align-self: center;
    height: 200px;
    width: 200px;
  }

  #box-2 {
    background-color: orangered;
    /* align-self: ; */
    height: 200px;
    width: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1">1</div>
  <div id="box-2">2</div>
</div>

这是不设置属性的情况（默认值为auto的情况）：
在这里插入图片描述
这是第一个元素的align-self值为flex-start的情况：
在这里插入图片描述
这是第一个元素的align-self值为flex-end的情况：
在这里插入图片描述
这是第一个元素的align-self值为center的情况：
在这里插入图片描述

这是第一个元素的align-self值为stretch的情况：

在这里插入图片描述
这是第一个元素的align-self值为baseline的情况：

在这里插入图片描述

(5) flex 短方法属性（flex-grow、flex-shrink 和 flex-basis的合并简写方式）

属性作用：flex-grow、flex-shrink 和 flex-basis的合并简写方式。例如，flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。

代码实现：

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    flex: 1 0 10px;
    height: 200px;
  }

  #box-2 {
    background-color: orangered;
    flex: 1 0 10px;
    height: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

代码示例情况：
在这里插入图片描述

二. 总结

1.整体居中方法

通过justify-content: center; align-items: center;配合使用可以在flex容器内使得整体的子元素实现居中。
代码示例：

<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    justify-content: center;
    align-items: center;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 25%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 25%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

在这里插入图片描述

2.单个元素居中方法

子元素中写入align-self: center;只能实现其交叉轴居中，但是要搭配父元素中的justify-content: center;主轴居中才可实现绝对居中。

盼盼哦
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 Flex布局详解
09-01
弹性因子（flex-grow, flex-shrink, flex-basis）在微信小程序的Flex布局中，每个伸缩项目都可以通过flex属性来指定其弹性因子，它是一个简写属性，可以设置三个值：flex-grow, flex-shrink, 和 flex-basis。1. flex...
使用display flex将图片居中的方法
weixin_33948416的博客
06-09 2902
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局 注意：（Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。） 1.将图片水平方向居中： justify...
flex 布局
Daisy__xu的博客
04-20 1172
flex 基本概念 使用 flex 布局首先要设置父容器 display: flex，然后再设置 justify-content: center 实现水平居中，最后设置 align-items: center 实现垂直居中。 #dad { display: flex; justify-content: center; align-items: center }
flex-居中方式总结
最新发布
qq_45897045的博客
04-16 293
设置父元素的 text-align：center。1. 让元素向下位移父元素（背景元素）的 50%2> 相对来说，兼容性差一点点（基本可以忽略）1> flex布局中所有的元素都会被垂直居中。1> 必须使用定位（意味着脱离标准流）2. 让元素向上位移自身的 50%：设置当前块级元素的（宽度）2> 必须给元素设置高度。：元素有宽度的情况下，
flex布局
yanzi_0216的博客
10-13 368
flex布局 一、布局 块级元素flex布局 display: flex; 内联元素flex布局 display: inline-flex; 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 二、基本概念 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cros
常用的几种布局方式---Flex 布局(垂直居中展示）
weixin_64310738的博客
02-14 2万+
常用的几种布局方式---Flex 布局(垂直居中展示）
flex详解
anshaobiao6449的博客
04-26 532
先看效果：http://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-around 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 一、Flex布局是什么？ Flex...
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。Flex布局允许开发者更灵活地控制元素的大小、位置和顺序，即使元素尺寸...
css flex 弹性布局详解
09-24
在本文中，我们将深入探讨Flex布局的关键概念，包括基本用法、父容器属性以及子元素的布局。 首先，要启用Flex布局，你需要将父容器的`display`属性设置为`-webkit-flex`或`flex`。在给出的案例中，`.box`类的样式...
详解CSS中的flex容器与flex属性
09-24
- `justify-content`属性控制flex子元素沿主轴的对齐方式，可能的值有`flex-start`（默认，靠左/上）、`flex-end`（靠右/下）、`center`（居中）、`space-between`（两端对齐，子元素之间间隔相等）和`space-around`...
CSS弹性盒模型flex在布局中的应用详解
01-19
前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍flex在布局中的应用 元素居中【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items JavaScript Code复制内容到剪贴板 <style&...
flex布局居中
weixin_35753291的博客
01-04 5541
要在 flex 布局中居中元素，可以使用 justify-content: center 和 align-items: center。 .container { display: flex; justify-content: center; align-items: center; } 这会使元素在容器中水平居中和垂直居中。 如果你只想要垂直居中，可以只使用 align-items:...
使用flex布局时，使得子元素居中最完美的方法？
liweibo348的博客
09-28 7315
  就是在子元素的样式中，设置    margin: auto;这样子元素就完全居中了。 .flex-container {     display: -webkit-flex;     display: flex;     width: 400px;     height: 250px;     background-color: lightgrey; } .flex-item {    ...
flex布局水平居中
ZHU20200222的博客
02-29 1万+
想要让元素实现弹性布局，只需要要包含容器中（父元素）设置属性display:flex即可，平时工作用的最多的就是水平垂直居中啦，想要让元素水平居中，在容器中设置justify-content:center;而要实现垂直居中则可以设置align-items:center；重点来了，还有另一种奇淫技巧可以实现垂直居中，那就是当父元素设置了弹性布局并且设置了高度后，只要设置元素的margin:auto就...
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 11万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
display: flex实现元素居中，以及各种居中方法
awjp86316的博客
09-04 7017
近项目开发过程中需要实现元素居中布局，自己前端水平不是很高很是头痛，问题最终解决。自己记录下解决过程，以便下次查阅。 1、display :flex 布局(针对chrome浏览器和ie11) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
【转载】flex布局 居中
异想之旅的博客
03-15 2145
display:flex; justify-content: center; 检查侧轴是否居中，比如古代竖着写字，检查字是否在每条竹简的中央。 display:flex; align-items: center; 检查横轴是否居中，比如现代人是横着写字，检查字是否写在上下横线的中间。 display:flex; justify-content: center; align-items: center; 两者都加上就变成了居中的效果。 flex布局中align-items和align-conte
Flex布局实现div内部子元素垂直居中
fengchengwu2012的博客
01-04 1万+
1、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex ...
css弹性布局笔记一（垂直居中、水平居中、居中）（display:flex）
ayong120的博客
06-20 3534
CSS弹性布局，需要一个容器，容器中至少包含一个以上的元素 flex布局，子元素自动换行，取消行间距，相邻子元素的border重叠
flex单个子元素主轴
08-19
flex单个子元素的主轴对齐方式可以通过align-self属性来指定。align-self属性用于调整单个子元素自身在主轴上的对齐方式。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [flex布局属性详解&&基于flex的单元素，整体元素居中方法&&代码示例](https://blog.csdn.net/invalid_oath/article/details/122027283)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值