前篇，我们了解了浮动和定位，但是页面千千万，那两种布局方式可以满足我们许多的想法吗？今天我再给大家分享第三种布局方式，那就是弹性盒子

文章目录

前言
一、弹性盒子是什么？
二、基本属性
- 1.属性的定义和用法
- 2.部分代码演示
总结

前言

通过设置display属性值为flex或flex item将其定义为弹性容器，设置flex布局以后，子元素的float，clean和vertical-align属性将会失效，那么具体怎么使用呢，我一起来看看叭~

一、弹性盒子是什么？

弹性盒子：让元素随页面大小自适应

弹性容器：display值为flex

弹性元素：弹性容器的子元素

一个元素既可以是弹性容器也可以是弹性元素

主轴：弹性元素排列的方向

辅轴：与主轴垂直的方向

webkit内核浏览器必须加上-webkit-前缀

二、基本属性

1.

1.flex-direction :设置弹性元素排列方向

可选值：

a.水平方向

row 自左向右默认值

row-reverse 自右向左

b.垂直方向

cloumn 向下

cloumn-reverse 向上

2.flex-wrap:设置弹性元素是否转行

可选值：

wrap:沿辅轴换行

wrap-reverse:沿辅轴反方向换行

nowrap：不自动换行，默认值

3.justify-content:主轴上空白空间分配

可选值：

flex-start：主轴起边排列

flex-end:主轴终边排列

center:居中排列

space-around:空白分布在弹性元素二侧,中间元素距离相加

space-between：空白分布在弹性元素之间

space-evenly：空白分布在弹性元素一侧，元素之间距离相同

left/right/start/end

4.align-content:辅轴空白空间分配;多根轴线对齐方式（多行或多列）

可选值

flex-start：辅轴起边排列

flex-end:辅轴终边排列

center:居中排列

space-around:空白分布在弹性元素二侧,中间元素距离相加

space-between：空白分布在弹性元素之间

space-evenly：空白分布在弹性元素一侧，元素之间距离相同

left/right/start/end

5.align-items：弹性元素在辅轴上排列，元素之间(单行或单列)

可选值：

stretch:将同一水平的弹性元素辅轴高度一样，未设高度时元素会拉伸

center:辅轴中间

flex-start：辅轴起边对齐

flex-end：辅轴终边对齐

6.将justify-content和align-items同时设置center，弹性元素居中

四、弹性元素

1.flex-grow:弹性元素的伸展系数

2.flex-shrink：弹性元素的收缩系数

3.flex-basis；弹性元素在主轴上的基础长度，默认值auto

可简写：flex：grow/shrink basis

4.align-self：用来覆盖容器的align-items

可选值：

stretch:将同一水平的弹性元素辅轴高度一样，元素会拉伸

center:辅轴中间

flex-start：辅轴起边对齐

flex-end：辅轴终边对齐

5.order：设置弹性元素(有order属性弹性元素的)的排列顺序,

代码如下（示例）：

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

代码段：

<!DOCTYPE html>
<html>
<head>
<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;
}
</style>
</head>
<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>

当然我们可以修改排列方式。

如果我们设置 direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变:

代码段：

<!DOCTYPE html>
<html>
<head>
<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;
}
body {
    direction: rtl;
}
 
.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;
}

</style>
</head>
<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>

2.flex-direction

flex-direction 属性指定了弹性子元素在父容器中的位置。

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

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）。

总结：常见问题

1.当设置display：flex时，width：100%,不能完全与父元素一致原因，

应为父元素设置了弹性盒子，使子元素等比例缩放

2.若父元素设置display：flex，子元素的高度和宽度失效，可将子元素设置flex-shrink为0

好啦，今天的分享就到这里辣，学习无止境，在学习的过程中要不断调整自己的状态呀，将知识巩固，最后，祝愿屏幕前的你呀，生活愉快，万事胜意！

CSS——弹性盒子

文章目录

前言

一、弹性盒子是什么？

二、基本属性

1.

2.flex-direction

justify-content 属性

总结：常见问题

猜你喜欢