移动端的自适应布局神器—Flex Box(2)

最新推荐文章于 2022-02-12 21:35:33 发布

fareise

最新推荐文章于 2022-02-12 21:35:33 发布

阅读量977

点赞数 1

分类专栏： HTML5 前端开发常用技巧经验记录文章标签： flex css HTML5 Web前端

本文链接：https://blog.csdn.net/fareise/article/details/55670445

版权

前端开发常用技巧经验记录同时被 2 个专栏收录

64 篇文章 59 订阅

订阅专栏

HTML5

23 篇文章 0 订阅

订阅专栏

之前的例子中，都是按照水平方向为例的，这些例子中的元素，高度都是相同的。如果元素的高度不同，在纵向方向上，也需要设定一些对齐方式。Flex布局中也为我们提供了在另一个方向上对齐的设定，这个属性就是align-item。align-items有五个选项值，它们分别是：

stretch — 设定元素占满整个长度，前提是没有指定这些元素的高度，这是默认值

flex-start — 设定元素在起点对齐

flex-end — 设定元素终点对齐

center — 设定元素按照中线对齐

baseline — 设定元素按照每个元素中第一行文本的基线对齐

下面的例子中可以直观的看到align-item属性是如何进行工作的。

代码：

<!DOCTYPE>
<html>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<style type="text/css">
.container{
  display:flex;
  display:-webkit-flex;
  border: 2px solid black;
  padding: 20px;
  margin: 20px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
.item1{
  padding-top: 10px;
  background: green;
  width: 200px;
  height: 100px;
  margin: 10px;
  font-weight: bold;
}
.item2{
  padding-top: 50px;
  background: green;
  width: 300px;
  height: 200px;
  margin: 10px;
  font-weight: bold;
}
.item3{
  background: green;
  width: 100px;
  height: 50px;
  margin: 10px;
  font-weight: bold;
}
.item4{
  padding-top: 100px;
  background: green;
  width: 100px;
  height: 150px;
  margin: 10px;
  font-weight: bold;
}
.flex-start{
  align-items: flex-start;
}
.flex-end{
  align-items: flex-end;
}
.center{
  align-items: center;
}
.stretch{
  align-items: stretch;
}
.baseline{
  align-items: baseline;
}
</style>
</head>
<body>
<div class="container flex-start">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
<div class="container flex-end">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
<div class="container center">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
<div class="container baseline">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
<div class="container stretch">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
</body>
</html>

这个例子有几处修改需要注意。首先，我们为不同的item元素添加了不同的padding-top值，这是为了能够看出baseline的作用（按照第一行文字的基线对其）。其次，修改了不同item元素的高度，从而能够看出使用align-items属性后元素的展现的变化情况。

通过这个示例，就可以很清晰的明晰align-items是如何影响元素对齐方式的了。注意，当设定为stretch时，由于为元素设定了高度，所以最后的表现形式看起来和设定为flex-start的情况差不多。如果没有设定高度，每个元素的高度都会等于100%。

当有多个元素，并且设置了元素可以换行时，可能会出现在弹性容器内部中包含了很多行元素。以水平为例，这么多行的元素，每一行其实都有一个主轴，而这些主轴的对齐方式，其实也可以设置对齐方式。这个属性是align-content。这个属性的作用，可以理解为把每一行元素看成是一个元素，然后去在纵轴方向按不同的方式排列他们，类似于之前的align-items。只不过，这里排列的单位是轴线。

align-content属性包含的属性值和justify-content属性包含的属性值完全相同，通过下面的例子，来体会一下align-content属性是如何对轴线进行排列的。

<!DOCTYPE>
<html>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<style type="text/css">
.container{
  display:flex;
  display:-webkit-flex;
  border: 2px solid black;
  padding: 20px;
  margin: 20px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  height: 300px;
}
.item1{
  background: green;
  width: 200px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item2{
  background: green;
  width: 300px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item3{
  background: green;
  width: 100px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item4{
  background: green;
  width: 100px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item5{
  background: green;
  width: 200px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item6{
  background: green;
  width: 300px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item7{
  background: green;
  width: 80px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item8{
  background: green;
  width: 50px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item9{
  background: green;
  width: 120px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.item10{
  background: green;
  width: 200px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
}
.flex-start{
  align-content: flex-start;
}
.flex-end{
  align-content: flex-end;
}
.center{
  align-content: center;
}
.stretch{
  align-content: stretch;
}
.space-around{
  align-content: space-around;
}
.space-between{
  align-content: space-between;
}
</style>
</head>
<body>
<div class="container flex-start">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
</div>
<div class="container flex-end">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
</div>
<div class="container center">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
</div>
<div class="container strench">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
</div>
<div class="container space-between">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
</div>
<div class="container space-around">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
</div>
</body>
</html>

上面就介绍完了所有可以在弹性容器中设置的所有属性。这些属性，都是在父元素中设定的，通过为父元素设定这些属性，可以改变其中子元素的排布方式。

喜欢读书的，喜欢学知识的小伙伴，欢迎关注公众号“精粹微阅读”加入我们哦～～～