设置子元素在主轴(横轴)方向上的对齐方式为容器的开头_今日推送 │ CSS Flexbox布局（上）...

最新推荐文章于 2024-01-24 15:17:13 发布

weixin_39588104

最新推荐文章于 2024-01-24 15:17:13 发布

阅读量285

点赞数

文章标签：设置子元素在主轴(横轴)方向上的对齐方式为容器的开头

原创：牛津小马哥web前端工程师陈小妹妹。

在“ Flexbox布局”模块之前，有四种布局模式：

块布局block，常见的就是div
内联inline，用于文本
表table，用于二维表数据
定位position，用于元素的明确位置

这些尽管布局可以暂时性满足我们的要求，可是代码写起来不够方便简洁，于是有了Flex布局。flex，顾名思义，可收缩的布局，它是一种灵活的盒子布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

让我们从简单示例开始：

这是本例的代码，接下来的贴出的局部代码将基于该模板代码的改动。

<!DOCTYPE html>
<html>
<head>
<style>
. flex-container {
  background-color: rgb(153,93,181);
}

. flex-container > div {
  background-color: rgb(247,148,31);
  border-radius:10px;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The CSS Flexbox Layout</h1>

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

</body>
</html>

flex布局

通过将display属性设置为flex，flex容器变得灵活

.flex-container {
  display: flex;
}

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

flex-direction

flex-direction属性定义容器要在哪个方向上排列展现flex的子项，决定了主轴的方向。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

代码示例：

.flex-container {
  display: flex;
  flex-direction:row;
}

row行（默认）：水平方向，从左到右；
row-reverse行反向：水平方向，从右到左；
column列：竖直方向，从上到下
column-reverse列反转：竖直方向，从下到上

flex-wrap

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默认设置）：不换行，所有flex项目都在一行上
wrap：换行，flex项目将从上到下自动换行。
wrap-reverse：反向换行，flex项目将从下到上换行。

示例代码：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(153,93,181);
}

flex-flow

flex-flow是用于同时设置flex-direction和flex-wrap属性的简写属性

示例代码：

.flex-container {
  display: flex;
  flex-flow: row wrap;
  background-color: rgb(153,93,181);

justify-content

定义了沿主轴的对齐方式。当一行中的所有伸缩项目已达到最大大小时，它可以帮助分配剩余的剩余可用空间。当项目溢出线时，它还对项目的对齐方式施加一些控制。

flex-start（默认）：将项目打包到flex-direction的开头。

flex-end：项目在flex-direction的末端排列。

center：项目沿居中

space-between：同一行中的flex项目之间都有均匀分布的空间。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。

space-around：项目在行中均匀分布，项目之间和边缘具有一定的空间。请注意，从视觉上看，空间是不相等的，第一项相对于容器边缘有一个单位的空间，但下一项之间有两个单位的空间。简单来说，space-around展现flex项目，让每个项目前中后都有一定空间的留白。

概括性的说，相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

space-evenly：任意两个项目之间的间隔（以及边缘之间的空间）相等。

示例代码：

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap:wrap;
  background-color: rgb(153,93,181);
}

align-items

stretch（默认）：拉伸以填充容器（仍然遵守最小宽度/最大宽度）
flex-star：将项目放置在横轴的起点。
flex-end：将项目放置在横轴的末端。
center：项目在横轴上居中
baseline：项目对齐，例如基线对齐

示例代码:

.flex-container {
  display: flex;
  align-items:center;
  flex-wrap:nowrap;
  background-color: rgb(153,93,181);
  height:300px;
}

align-content

space-around：第一个flex行到顶部边缘的距离和最后一个flex行到底部边缘的距离将会是相邻flex行之间距离的一半。
space-between使得flex项目的第一行对齐顶部，最后一行对齐底部。相邻flex行间距离相同。
center使得flex的项目行的在容器中间对齐
stretch拉伸flex的项目行，以此填满容器空间
flex-start使得flex的项目行，从容器的开始处从上到下排列
flex-end使得flex的项目行，从容器的底部从下到上排列

示例代码：

.flex-container {
  display: flex;
  flex-wrap:wrap;
  align-content:space-between;
  background-color: rgb(153,93,181);
  height:300px;
}

完美的布局：水平垂直居中布局

巧用两个属性，达到水平垂直居中效果

关键代码如下:

.flex-container {
  display: flex;
  flex-wrap:wrap;
  align-content:center;
  justify-content:center;
  background-color: rgb(153,93,181);
  height:300px;
}

align-items和align-content解惑：

许多同学会疑惑，这align-items和align-content的功能很相似，它们有什么区别呢？

align-items是针对单行中的项目。对于主轴上的单行元素，align-items将使这些项目彼此对齐

而align-content属性适用于多行的flex容器，并且当交叉轴上有多余空间使flex容器内的flex线对齐。

前面的实例中，由于我们设置了margin:10px,导致align-items和align-content的区别不明显

现在，我们把css修改如下：

<style>
.flex-container {
  display: flex;
  align-content:center;
  flex-wrap:wrap;
  background-color: rgb(153,93,181);
  height:300px;
}

.flex-container > div {
  background-color: rgb(247,148,31);
  border-radius:10px;
  width: 100px;
  margin: 1px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>