CSS——弹性盒子

最新推荐文章于 2024-01-07 23:07:16 发布

不知道改什么昵称

最新推荐文章于 2024-01-07 23:07:16 发布

阅读量425

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_40971059/article/details/104554283

版权

一、弹性盒子

弹性盒子由弹性容器(Flex container) 和 弹性子元素(Flex item) 组成。

弹性容器通过设置 display 属性为 flex 或 inline-flex（行内元素）将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

弹性盒子只定义了弹性子元素如何在弹性容器内布局，在弹性容器外以及弹性子元素内都是正常渲染的。

1、基本概念

在这里插入图片描述
弹性容器默认有两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

单个子元素占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size。

2、基本用法

以下展示了弹性子元素在弹性容器内从左到右一行显示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  .flex-container {
    display: flex;
    width: 400px;
    height: 400px;
    background-color: red;
  }
  .flex-item {
    width: 100px;
    height: 100px;
    background-color: green;
    margin: 0 0 0 20px;
  }
</style>
<body>
  <div class="flex-container">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
  </div>
</body>
</html>

1）、tips

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

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

3、弹性盒子的属性

1）、flex-direction

flex-direction 属性决定了主轴的方向。

flex-direction 的值有:

row（默认值）：主轴为水平方向，从左到右排列。
row-reverse：主轴为水平方向，从右到左排列。
column：主轴为垂直方向，从上到下排列。
column-reverse：主轴为垂直方向，从下到上排列。

.flex-container {
  display: flex;
  width: 400px;
  height: 400px;
  background-color: red;
  flex-direction: row-reverse;
  /*flex-direction: column;*/
  /*flex-direction: column-reverse;*/
}

2）、flex-wrap

默认情况下，项目都排在一条线上。flex-wrap属性定义，如果一条轴线排不下，弹性子元素如何换行。

flex-wrap 的值有:

nowrap （默认值）：不换行
wrap ：换行，第一行在上方
wrap-reverse ：换行，第一行在下方。

3）、justify-content

justify-content属性定义了弹性子元素在主轴上的对齐方式。

justify-content 的值有:

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：
space-around：

下图十分形象的表述了几个值的区别，数字 1、2、3、4 代表着弹性子元素

在这里插入图片描述

4）、align-items

align-items属性定义弹性子元素在交叉轴上如何对齐。

align-items 的值有（具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。）：

flex-start ：与交叉轴的起点对齐。
flex-end ：与交叉轴的重点对齐。
center ：与交叉轴的中点对齐。
baseline ：弹性子元素的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

如下是一个例子，可以直观看到区别

.flex-container {
 display: flex;
 width: 400px;
 height: 400px;
 background-color: red;
 /*align-items: flex-start;*/
 /*align-items: flex-end;*/
 /*align-items: center;*/
}
.flex-item {
 width: 100px;
 height: 100px;
 background-color: green;
 margin: 20px;
}

在这里插入图片描述

5）、align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

stretch （默认值）：弹性子元素将会伸展以占用剩余的空间。
flex-start ：与交叉轴的起点对齐。
flex-end ：与交叉轴的终点对齐。
center ：与交叉轴的中点对齐。
space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

在这里插入图片描述

4、弹性子元素的属性

1）、order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: -1;
}

2）、flex-grow

flex-grow属性定义弹性子元素的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

如果所有子元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。

如果一个子元素的flex-grow属性为2，其他子元素都为1，则前者占据的剩余空间将比其他项多一倍。

3）、flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

如果所有子元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

如果一个子元素的flex-shrink属性为0，其他子元素都为1，则空间不足时，前者不缩小。

在这里插入图片描述

4）、flex-basis

flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

5）、flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

6）、align-self

align-self属性允许单个子元素有与其他子元素不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。语法：

align-self: auto | flex-start | flex-end | center | baseline | stretch

7）、完美的居中

使用弹性盒子，只需要设置 margin: auto; 就可以使得弹性子元素在两轴方向上完全居中:

<style>
  .flex-container {
    display: flex;
    width: 400px;
    height: 400px;
    background-color: red;
    /*justify-content: center;
    align-items: center;*/
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 0;
    background-color: green;
    margin: 20px;
  }
</style>
<body>
  <div class="flex-container">
    <div class="flex-item">flex item 1</div>
  </div>
</body>

justify-content: center;align-items: center; 也有相同的效果。通过设置弹性子元素在主轴和侧轴上的排列方式。

二、参考

不知道改什么昵称

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS——弹性盒子

一、弹性盒子弹性盒子由弹性容器(Flex container) 和弹性子元素(Flex item) 组成。弹性容器通过设置 display 属性为 flex 或 inline-flex（行内元素）将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。弹性盒子只定义了弹性子元素如何在弹性容器内布局，在弹性容器外以及弹性子元素内都是正常渲染的。1、基本概念弹性容器默认有两根轴：...
复制链接

扫一扫