CSS3 弹性盒子

最新推荐文章于 2024-10-06 15:01:40 发布

没什么丨好说的

最新推荐文章于 2024-10-06 15:01:40 发布

阅读量127

点赞数

分类专栏： CSS3 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_46683645/article/details/116042809

版权

CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

重点放前面：如果想认真深入学习flexbox这个属性：推荐一个小游戏Flexbox Froggy，下面是关卡及相关内容:

justify-content: 1-4
align-items: 5-7
flex-direction: 8-13
order: 14-15
align-self: 16-17
flex-wrap: 18-19
flex-flow: 20
align-content: 21-23

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

2. 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。为什么呢？

因为他们有默认的排列方向，我们称为主轴,也可以理解为X轴，使用row（首元素贴近弹性盒子左边）和row-reverse（首元素贴近弹性盒子右边）。

有主轴就有侧轴（Y轴），使用column（首元素贴近盒子顶部）和colunm-reverse（首元素贴近盒子底部）

默认情况下，弹性子元素的排列方式是row，我们可以通过flex-direction: row-reverse | column | column-reverse设置弹性子元素的其他的排列方向
上图：
row:
在这里插入图片描述
row-reverse:

column:

column-reverse:

3. justify-content 属性

justify-content: flex-start | flex-end | center | space-between | space-around

flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

4. align-items 属性

align-items: flex-start | flex-end | center | baseline | stretch

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

5. flex-wrap 属性

nowrap - 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。

6. align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

align-content: center

在这里插入图片描述
可以看到，居中的不是弹性子元素，而是“行”居中了

7. 弹性子元素属性

1. order 属性

用整数值来定义排列顺序，数值小的排在前面。可以为负值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>order 属性</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.first {
    -webkit-order: -1;
    order: -1;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item first">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

</body>
</html>

在这里插入图片描述

2. 对齐

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。
所以我们得到了一个完美解决盒子居中的方案：

 margin: auto;

在这里插入图片描述

3. align-self 属性

align-self 属性用于设置弹性元素自身在侧轴（Y轴）方向上的对齐方式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>align-self 属性</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}

.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.item3 {
    -webkit-align-self: center;
    align-self: center;
}

.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}

.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item item1">flex-start</div>
  <div class="flex-item item2">flex-end</div>
  <div class="flex-item item3">center</div>
  <div class="flex-item item4">baseline</div>
  <div class="flex-item item5">stretch</div>
</div>

</body>
</html>

在这里插入图片描述

4. flex 属性

flex 属性用于指定弹性子元素如何分配空间。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>flex 属性</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}

.item1 {
    -webkit-flex: 2;
    flex: 2;
}

.item2 {
    -webkit-flex: 1;
    flex: 1;
}

.item3 {
    -webkit-flex: 1;
    flex: 1;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item item1">flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>  
</div>

</body>
</html>