[译] 你需要知道的所有 Flexbox 排列方式

最新推荐文章于 2024-04-08 21:43:02 发布
最新推荐文章于 2024-04-08 21:43:02 发布
阅读量149 收藏
点赞数
文章标签： 后端 前端 区块链 ViewUI
原文链接：https://juejin.im/post/5bc728f2f265da0aef4e3f6d
版权

简论： 在这篇文章中，我们将会在探讨一些基本规则的同时谈一谈 Flexbox 的排列属性以帮助我们知道横轴和竖轴上（元素的）对齐是如何实现的。

在这个系列的第一篇文章中，我解释了当你把一个元素设置为 display: flex 时发生了什么。这次我们将会讨论下排列属性，同时也会讨论（这些属性）如何和 Flexbox 一起工作。如果你曾经对何时使用 align 属性和 justify 属性感到疑惑的话，我希望这篇文章将会让（排列的）问题变得清晰！ 如果你曾经对何时使用 align 属性和 justify 属性感到疑惑的话

Flexbox 排列方式的历史

在整个 CSS 布局的历史中，如何能恰当地在横竖两轴正确排列元素估计是 Web 设计中最难的问题了。所以当浏览器中开始出现能够在两轴恰当地排列元素和元素组的 Flexbox 排列方式时，像你我一样的广大web开发者都为之激动不已。排列方式变得简单到只需要两行 CSS 代码：

HTML:

<div class="container">
  <div class="item">Item</div>
</div>复制代码

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  height: 300px;
  width: 300px;
  justify-content: center;
  align-items: center;
}

.item {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}复制代码

可以看由 Rachel Andrew (@rachelandrew) 创建的在 CodePen 上的展示：Smashing Flexbox Series 2: center an item 。

你所了解的 flexbox 排列属性目前都已经完整地被收录到 盒子元素排列规范中了。这个规范文档详细地说明了在各种布局情况下的元素排列如何工作。这意味着我们在使用 Flexbox 排列方式或者将来在不同布局情况下都可以在 CSS Grid 中使用相同的排列属性。因此，任何新的排列都会在新的盒子元素排列规范中指出，而不是新的 Flexbox 版本。（译者注：此处是新的特性是以新的排列属性/方法来创建的，而不是更新 Flexbox 版本）

属性

许多人告诉我他们在使用 flexbox 的时候很难区别是应该使用以 align- 还是 justify- 开头的属性。所以你需要知道：

  • justify- 实现主轴上的排列方式。即排列与你的 flex-direction 相同的方向。
  • align- 实现交叉轴上的排列方式。即排列与你的 flex-direction 相垂直的方向。

在下文中，根据主轴和交叉轴而不是水平和垂直的方向来思考会更容易理解。（主轴和交叉轴）和物理方位一点关系都没有。

用 justify-content 来排列主轴

我们将会从主轴排列来开始讨论。在主轴上，我们通过 justify-content 属性来实现排列。这个属性的作用对象是我们的所有 flexbox 子元素所组成的组。同时也控制着组内所有元素的间距。

默认的 justify-content 值是 flex-start。这也就是为什么你声明 display: flex 之后你的所有 flexbox 子元素朝着你的 flex 盒子的开始排成一行。如果你有一个值为 row 的 flex-direction 属性同时页面是从左到右读的语言（例如英语）的话，这些字元素将会从左边开始排列。

子元素从盒子的开始排列（放大预览)

记住 justify-content 只会在 盒子有剩余空间可以分配时 发挥作用。所以如果你的子元素占满了主轴的空间的话，justify-content 将不会产生任何作用。

盒子没有任何剩余空间可以分配（放大预览）

如果将 justify-content 设置为 flex-end 的话，所有的元素将会移动到 flex 盒子的结束排成一行。空闲空间将会被移到 flex 盒子的开始之处。

子元素从盒子的结束排列（放大预览）

我们可以对这些剩余的区域做其他事情。我们可以通过 justify-content: space-between来让它分布在 flex 盒子的两个子元素之间。在这种情况下，最前和最后的两个子元素会贴着容器，同时所有的空间将会被平均分配在每一个子元素之间。

剩余空间分配在子元素之间（放大预览）

我们也可以通过使用 justify-content: space-around 将这些空间环绕着 flex 盒子的子元素。在这种情况下，子元素将会均匀地分布在容器中，同时可用空间也会被这些元素分享。

子元素的两侧都有空间（[放大预览(cloud.netlifyusercontent.com/assets/344d…)）

在盒子排列规范中可以找到一个 justify-content 的更新的值，它没有出现在 Flexbox 的规范中。它的值是space-evenly。在这种情况下，子元素会均匀分布在容器内，同时额外的空间将会被子元素的两侧所分享。

元素均匀地分布在容器内（放大预览）

你可以在 demo 中尝试一下：

HTML:

<div class="controls">
<select id="justifyMe">
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
  <option value="space-around">space-around</option>
  <option value="space-between">space-between</option>
  <option value="space-evenly">space-evenly</option>
</select>

</div>

<div class="container" id="container">
  <div class="item">One</div>
  <div class="item">Two Two</div>
  <div class="item">Three Three Three</div>
  
</div>复制代码

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
}

.item {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.controls {
  background-color: rgba(0,0,0,.1);
  padding: 10px;
  border-radius: .5em;
  border: 1px solid rgba(0,0,0,.2);
  margin: 0 0 2em 0
}

.controls select {
  font-size: .9em;
}复制代码

JavaScript:

var justify = document.getElementById("justifyMe");
justifyMe.addEventListener("change", function (evt) {
  document.getElementById("container").style.justifyContent = evt.target.value;
});复制代码

可以看由 Rachel Andrew (@rachelandrew) 创建的在 CodePen 上的展示：Smashing Flexbox Series 2: justify-content with flex-direction: row

这些值同样会在你的 flex-direction 为 column 时生效。你可能没有额外的空间来分配一个列，但你可以通过添加 height 属性或者是改变 flex 容器的大小来解决这个问题。就像下面这个 demo 一样。

HTML:

<div class="controls">
<select id="justifyMe">
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
  <option value="space-around">space-around</option>
  <option value="space-between">space-between</option>
  <option value="space-evenly">space-evenly</option>
</select>

</div>

<div class="container" id="container">
  <div class="item">One</div>
  <div class="item">Two Two</div>
  <div class="item">Three Three Three</div>
</div>复制代码

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 60vh;
}

.item {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.controls {
  background-color: rgba(0,0,0,.1);
  padding: 10px;
  border-radius: .5em;
  border: 1px solid rgba(0,0,0,.2);
  margin: 0 0 2em 0
}

.controls select {
  font-size: .9em;
}复制代码

JavaScript:

var justify = document.getElementById("justifyMe");
justifyMe.addEventListener("change", function (evt) {
  document.getElementById("container").style.justifyContent = evt.target.value;
});复制代码

可以看由 Rachel Andrew (@rachelandrew) 创建的在 CodePen 上的展示：Smashing Flexbox Series 2: justify-content with flex-direction: column

用 align-content 来排列交叉轴

如果你给你的 flex 容器添加了 flex-wrap: wrap 同时也有好几条 flex 排列行，那你可以用 align-content 属性来在交叉轴上排列你的 flex 排列行。不过，这将会需要交叉轴上有额外的空间。在下面这个 demo 中，我的交叉轴作为竖直的列在运行，同时我设置了这个 flex 容器的高度为 60vh。由于这个高度比我展示 flex 子元素所需的高度大，所以我的容器有了交叉轴方向上的空余空间。

我可以使用下面所有的 align-content 属性值：

HTML:

<div class="controls">
<select id="alignMe">
  <option value="stretch">stretch</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
  <option value="space-around">space-around</option>
  <option value="space-between">space-between</option>
  <option value="space-evenly">space-evenly</option>
</select>

</div>

<div class="container" id="container">
  <div class="item">One</div>
  <div class="item">Two Two</div>
  <div class="item">Three Three Three</div>
  <div class="item">Four Four Four Four</div>
</div>复制代码

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  max-width: 400px;
  height: 60vh;
  display: flex;
  flex-wrap: wrap;
}

.item {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.controls {
  background-color: rgba(0,0,0,.1);
  padding: 10px;
  border-radius: .5em;
  border: 1px solid rgba(0,0,0,.2);
  margin: 0 0 2em 0
}

.controls select {
  font-size: .9em;
}复制代码

JavaScript:

var align = document.getElementById("alignMe");
alignMe.addEventListener("change", function (evt) {
  document.getElementById("container").style.alignContent = evt.target.value;
});复制代码

可以看由 Rachel Andrew (@rachelandrew) 创建的在 CodePen 上的展示：Smashing Flexbox Series 2: align-content with flex-direction: row

如果我的 flex-direction 值为 column 的话，那 align-content 属性将像下面这个例子一样运行：

HTML:

<div class="controls">
<select id="alignMe">
  <option value="stretch">stretch</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
  <option value="space-around">space-around</option>
  <option value="space-between">space-between</option>
  <option value="space-evenly">space-evenly</option>
</select>

</div>

<div class="container" id="container">
  <div class="item">One</div>
  <div class="item">Two Two</div>
  <div class="item">Three Three Three</div>
  <div class="item">Four Four Four Four</div>
</div>复制代码

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  max-width: 400px;
  height: 60vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.item {
  height: 20vh;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.controls {
  background-color: rgba(0,0,0,.1);
  padding: 10px;
  border-radius: .5em;
  border: 1px solid rgba(0,0,0,.2);
  margin: 0 0 2em 0
}

.controls select {
  font-size: .9em;
}复制代码

JacaScript:

var align = document.getElementById("alignMe");
alignMe.addEventListener("change", function (evt) {
  document.getElementById("container").style.alignContent = evt.target.value;
});复制代码

可以看由 Rachel Andrew (@rachelandrew) 创建的在 CodePen 上的展示：Smashing Flexbox Series 2: align-content with flex-direction: column

正如 justify-content 属性一样，我们的设置作用在（子元素所组成的）子元素组中，同时空余空间被分割。

简写方法 place-content

在盒子元素排列规范中，我们发现了一个简写方法 place-content。使用这个属性意味着你可以一次性设置 justify-content 和 align-content。它的第一个值是 align-content，第二个值是 align-content 。如果你仅仅设置了一个值 A，那么这两个值都将设置成 A，因此：

.container {
    place-content: space-between stretch;
}
复制代码

和下面一样：

.container {
    align-content: space-between; 
    justify-content: stretch;
}
复制代码

如果我们使用：

.container {
    place-content: space-between;
}
复制代码

那将和下面一样：

.container {
    align-content: space-between; 
    justify-content: space-between;
}
复制代码
用 align-items 来排列交叉轴

我们现在知道，我们可以对（所有 flex 子元素所组成的）子元素组进行关于 flex 元素和 flex 排列行的操作。不过，我们希望有其它方式即通过声明元素与元素之间在数轴上的关系来操作我们的元素。你的 flex 容器有一个高度，这个高度可能是由容器内最高的子元素所决定的，就如下图一样。

容器的高度被第三个子元素所定义（放大预览）

flex 容器的高度可以通过给 flex 容器添加一个 height 属性所代替：

容器的高度通过该容器的大小属性所定义（放大预览）

flex 子元素看起来都被拉伸到最高的子元素的高度的原因是 align-items 的初始值是 stretch。子元素们在交叉轴上被拉伸成 flex 容器在那个方向上的尺寸了。

请记住哪里出现 align-items 会导致困惑：如果你有一个具有多个 flex 排列行的 flex 容器，那么每一个 flex 排列行都会像一个新的 flex 容器一样，（该行的）最高的 flex 子元素将会决定哪一行的所有 flex 子元素高度。

除了设置拉伸的初始值之外，你也可以给 align-items 属性设置一个值 flex-start，在这种情况下 flex 子元素将会在容器的开始之处排列同时也不会拉伸。

flex 子元素排列在交叉轴的开始之处（放大预览）

设置值 flex-end 将会把它们（flex 子元素）移到交叉轴的结束之处。

flex 子元素排列在交叉轴的结束之处（放大预览）

如果你使用值 center ，那 flex 子元素将会排列在交叉轴中央：

flex 子元素排列在交叉轴中央（放大预览）

我们也可以设置依据文字基准线排列。这将会确保（flex 子元素）以文字的基准线排列，而不是盒子的边框。

根据文字基准线排列（放大预览）

你可以尝试使用这个 demo 中的值：

HTML:

<div class="controls">
<select id="alignMe">
  <option value="stretch">stretch</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
  <option value="baseline">baseline</option>
</select>

</div>

<div class="container" id="container">
  <div class="item">One</div>
  <div class="item">Two Two</div>
  <div class="item large">Three Three Three</div>
</div>复制代码

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  height: 40vh;
}

.item {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.large {
  font-size: 150%;
}

.controls {
  background-color: rgba(0,0,0,.1);
  padding: 10px;
  border-radius: .5em;
  border: 1px solid rgba(0,0,0,.2);
  margin: 0 0 2em 0
}

.controls select {
  font-size: .9em;
}复制代码

JacaScript:

var align = document.getElementById("alignMe");
alignMe.addEventListener("change", function (evt) {
  document.getElementById("container").style.alignItems = evt.target.value;
});复制代码

可以看由 Rachel Andrew (@rachelandrew) 创建的在 CodePen 上的展示：Smashing Flexbox Series 2: align-items

使用 align-self 来设置单个元素的排列

align-items 意味着你可以一次设置所有的 flex 子元素。这个操作的真正原理是对所有的 flex 子元素一一设置其 align-self 值。当然你也可以任意单一的 flex 子元素设置 align-self 值来使其与同一个 flex 容器的其它 flex 子元素不一样。

在下面的例子中，我使用了 align-items 属性来设置 flex 子元素组的排列方式是 center，但是同时也给第一个和最后一个设置了 align-self 属性来改变他们的排列方式。

HTML:

<div class="container" id="container">
  <div class="item">One</div>
  <div class="item">Two Two</div>
  <div class="item">Three Three Three</div>
</div>复制代码

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  height: 40vh;
  align-items: center;
}

.item {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.item:first-child {
  align-self: flex-end;
}

.item:last-child {
  align-self: stretch;
}复制代码

可以看由 Rachel Andrew (@rachelandrew) 创建的在 CodePen 上的展示： Smashing Flexbox Series 2: align-self

为什么没有 justify-self？

一个很常见的问题是为什么不能在主轴上排列单个元素或元素组？ 为什么在主轴上没有 -self 排列属性？如果你认为 justify-content 和 align-content 的作用是关于空余空间分布的，那么它们没有单独的排列方法的理由就显而易见了。我们将flex 子元素作为一整个组进行处理，并以某种方式分配可用空间——在组的开头及结尾或 flex 子元素之间。

想想 justify-content 和 align-content 在 CSS Gird 布局中如何起作用也是很有帮助的。这两个属性用于描述在 gird 容器和 gird 块之间的空余空间如何分配。再次地，我们将 gird 块当作一个组，然后这些属性决定他们之间的所有额外空间。正如我们在 Gird 和 Flexbox 中展示的作用那样，我们不能指定某一个元素去做一些不一样的事情。不过，有一个方法可以实现你想要的在主轴上类似 self 属性的布局，那就是使用自动外边距。

在主轴上使用自动外边距

如果你曾经在 CSS 中将一个块级元素居中（就像将页面主元素的容器通过将它的左右外边距设置为 auto ），那么你就已经有了如何设置自动外边距的经验了。当一个外边距的值设置为 auto 时，它（外边距）会尽可能地尝试在其所指的方向上变大。在使用外边距将一个块级元素居中时，我们将其左右的外边距都设置为了 auto；它们（左右外边距）都会尽可能地占据空间于是就将块级元素挤到了中间。

在 Flexbox 中使用自动外边距来排列主轴上的单个元素或者一组元素的效果非常好。在下面的例子中，我们实现了一个共同的设计模式。我有一个使用 Flexbox 的导航栏，其子元素以行的形式排列同时使用了默认值 justify-content: start。我想让最后的那个子元素和其它子元素分开并展示在 flex 排列行的最后面——假设该行有足够的空间。

我定位到了那个元素并且把它的 margin-left 属性设置成了 auto。这意味着它的外边距将会尽可能地占用它左边的空间，这意味着那个子元素被推到了最右边。

HTML:

<div class="container" id="container">
  <div class="item">One</div>
  <div class="item">Two Two</div>
  <div class="item push">Three Three Three</div>
</div>复制代码

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
}

.item {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}


.push {
  margin-left: auto;
}复制代码

可以看由 Rachel Andrew (@rachelandrew) 创建的在 CodePen 上的展示： Smashing Flexbox Series 2: alignment with auto margins

如果你在主轴上使用了自动外边距，那 justify-content 将不会有任何作用，因为自动外边距将会占据所有之前用在 justify-content 上的空间。

回退排列

每一个排列方法详细来说都会有一个回退排列，它会说明在你请求的排列方式无法实现时会发生什么。举个例子，如果在你的 flex 容器中只有一个子元素但你声明了 justify-content: space-between，会发生什么？答案是（该属性的）回退排列 flex-start 会让你唯一的那个子元素排列在 flex 容器的开始之处。对于 justify-content: space-around，回退排列 center 将会被使用。

在现在的规范中你不能改变回退排列的值，所以如果你希望 space-between 的回退值是 center 而不是 flex-start 的话，并没有方法能实现。这是 一份规范笔记，它描述了未来版本可能会支持这种方式。

安全和非安全的排列

最新的一个添加到盒子元素排列规范的是使用

safe

和

unsafe

关键词的关于安全和非安全的排列的概念。

看下面的代码，最后一个元素相较于容器太宽了同时是 unsafe 排列并且 flex 容器是在页面左边的，当子元素溢出界面之外时，其被裁减了。

.container {  
    display: flex;
    flex-direction: column;
    width: 100px;
    align-items: unsafe center;
}

.item:last-child {
    width: 200px;
}
复制代码

不安全的排列将会按照你定义的排列但可能导致界面数据丢失（放大预览）

安全的排列将会保护界面数据免于丢失，方式是通过重新移动溢出区间到其他地方：

.container {  
    display: flex;
    flex-direction: column;
    width: 100px;
    align-items: safe center;
}

.item:last-child {
    width: 200px;
}
复制代码

安全的排列会尝试避免数据丢失（放大预览）

这些关键词现在还很少有浏览器支持（译者注：自测 Chrome 69 已支持），不过，它展示了在盒子元素排列规范中带给了 Flexbox 额外的控制方式。

HTML:

<div class="container" id="container">
  <div class="item">One</div>
  <div class="item">Two Two</div>
  <div class="item">Three Three Three</div>
</div>复制代码

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  flex-direction: column;
  width: 100px;
  align-items: safe center;
}

.item {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.item:last-child {
  width: 200px;
}复制代码

可以看由 Rachel Andrew (@rachelandrew) 创建的在 CodePen 上的展示： Smashing Flexbox Series 2: safe or unsafe alignment

总结

Flexbox 的排列属性最初以列表的方式出现，但是现在它们有了自己的规范同时也适用于其它的布局环境。这里是一些小知识可能帮助你如何在 Flexbox 中使用它们：

  • justify- 适用于主轴，align- 适用于交叉轴；
  • 使用 align-content 和 justify-content 时你需要空余空间；
  • align-content 和 justify-content 属性面向的是子元素组、作用是分享空间。因此，你不能指定一个特定的子元素同时它们也没有对应 -self 排列属性；
  • 如果你想去排列一个子元素，或者在主轴上分离出一个组，请用自动外边距实现；
  • align-items 属性设置了整个子元素组的所有 align-self 值。可以通过设置 align-self 属性来设置一个特定的子元素。

如果发现译文存在错误或其他需要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。


weixin_34384915
关注
flex布局(二) : 位置与排列方式
h284306976的博客
01-16 4998
flex布局(二) : 位置与排列方式 1. flex-direction 决定主轴方向 改变主轴方向为：水平row(默认) 或者 垂直column 并且设置item元素的排序方式start->end(默认) 或者 end->start row row-reverse column column-reverse <style> .container{ /* 改变...
React Native探索（四）Flexbox布局详解
Android进阶三部曲 - 刘望舒
05-31 4221
在Android开发中我们有很多种布局，比如LinearLayout和RelativeLayout，同样在React Native也有它的布局，这个布局就是Flexbox布局。在CSS、React Native和Android等都有它的身影。这一篇文章，我们就通过各种小例子来掌握React Native中的Flexbox布局。
小程序flex排列方式
weixin_58214412的博客
09-02 176
排列方式： display: flex; flex-direction: row;（行排） flex-direction:column；（竖排） 对齐方式： justify-content: space-around;（距离两边空间相等间隔） justify-content: space-between;（齐平两边中间间隔）填充之后会距离两边有边距 padding: 20rpx; justify-content: flex-start;（齐平左边） align-items: center;（居中对齐） ..
10-CSS布局之flex布局
qq_43975332的博客
08-19 808
1 flex布局 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 2 基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。 每根轴都有起点和终点，这对于元素的对齐非常重要。 弹性容器中的所有子元素称为<弹性元素&gt
flex布局
2303_77723338的博客
10-20 671
（1）nowrap (默认不换行) 例如 我们有一个500px宽的父盒子，父盒子里面有六个100px宽的子盒子，默认不换行六个100px宽的盒子就会缩小自己的宽度，放在父盒子的一行上。（1） flex-start （默认初始值）以主轴为准,元素以主轴的起始点对齐 justify-content:flex-start;（2）flex-end 以主轴为准,元素以主轴的终点对齐 justify-content:flex-end。
css flex的排列方式
很酷的站长的博客
10-29 811
1、flex支持排列和排列。排列时，主轴和交叉轴改变了方向，但align-items和justify-content控制的轴线不变，即align-items还是控制交叉轴，justify-content控制主轴。2、水平方向对齐使用align-items，垂直方向使用justify-content。本文教程操作环境：windows7系统、css3版，DELL G3电脑。以上就是css flex排列方式的介绍，希望对大家有所帮助。
作业5：Flexbox
02-12
【Flexbox】是CSS布局模型的一种，全称为“Flexible Box”，中文通常译为“弹性盒布局”。这个模型设计的主要目标是提供一种更加有效的方式来处理复杂的网页布局，特别是在响应式设计中，可以更好地调整元素的排列、...
一篇完整的FlexBox布局指南
隔壁家的老黄
01-24 1226
一篇完整的FlexBox布局指南 转载请标注本文链接并附带以下信息： 译：Cydiacen 作者：CHRIS COYIER 原文：A Complete Guide to Flexbox 原文更新于 2016-11-19 译者的话 出于提升自身英语水平和巩固FlexBox的知识，于是打算翻译一篇比较知名的FlexBox布局的文章，当然这篇文章之前网上已有大漠的译文，此次翻译也有部分参考
HTML5元素周期表
07-26
CSS3的Flexbox或Grid布局可以轻松地排列元素卡片，使其适应不同屏幕尺寸。另外，CSS变量和预处理器（如Sass或Less）可以帮助管理样式，提高代码的可维护性。 HTML5的离线存储特性（如Application Cache或Service ...
div+css经验之谈
04-04
通过设置不同的CSS样式，我们可以让Div元素在页面上以各种方式排列，如行、列、网格等，实现复杂的网页布局。 CSS，即Cascading Style Sheets，层叠样式表，是用于定义HTML或XML（包括如SVG、MathML等各种XML方言）...
37. flex布局
potato123232的博客
07-15 1417
flex布局也叫弹性布局。
flex简介及其常见布局方式
weixin_44564157的博客
10-08 2274
flex 简介 为元素设置display: flex或者 display: inline-flex 该元素即成为伸缩容器（flex container）， 设置为flex ，该元素会独占一行 设置为 inline-flex，可以与其他 inline 元素在同一行。 此时伸缩容器的子元素自动升级为伸缩项目（flex item），伸缩项目的的特点如下， 伸缩项目默认在一行排列。 自动升级为块元素。 所有伸缩项目默认在主轴的 start 处排列。 伸缩项目也可以再次设置为flex，即flex可以互相嵌套。
基本的布局方法——Flex布局
rolanannn的博客
04-17 499
帮助大家快速对Flex布局有一个清晰的认识。
Flex布局
X-77
08-17 1797
在学习flex布局之前，我们常用的布局方式是基于盒模型上的，使用display属性+float属性+position属性帮助我们完成布局。但是某些布局就不易实现。 一、什么是Flex布局？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。使用Flex 布局，可以简便、完整、响应式地实现各种页面布局。 Flex布局在PC端的兼容性较差，Webkit 内核的浏览器，必须加上-webki...
css-flex布局
最新发布
weixin_65116989的博客
04-08 1617
order数值越小，排列越靠前，默认为0注意：和z-index不一样order:-1;
flex布局详解
m0_74132533的博客
06-19 4833
flex布局详解
flex的box中button的布局动态控制
sherryxuehua的专栏
06-29 204
同一个页面工具栏，要在不同的功能模块下显示不同的按钮，不能直接删除该空间，否则一些方法里用到这些控件，程序报错。但是需要根据模块功能动态隐藏一些，只用btntest1.visible=false，该控件所占的位置为一段空白，必须同时设置btntest1.includeInLayout=false，才能既隐藏控件又释放了其所占的空间。 如果用了box来布局所有功能按钮，作为一个工具栏，必须注意它的...
flex布局（理论+案例解释）
H-rosy的博客
08-31 2834
flex是flexibleBox的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。并且子元素的display为inline-block属性。伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex局 常见父项属性： 一下六个属性是对父元素进行设置的： flex-direction：设置主轴方向 justify-content：设置主轴上子元素的、、、...
掌握Flexbox基础：现代Web布局的核心
本文是一篇详尽的Flexbox入门指南，涵盖了从理论到实践的所有必要知识点，适合希望通过学习Flexbox提升Web布局能力的开发者和设计师。无论是新手还是经验丰富的开发者，都能在本文中找到有价值的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值