[CSS]有关如何使用Flexbox的详尽说明!从基础到实践(带样本)

“我真的不知道Flexbox可以做什么。”
“ Flexbox与并排浮动和显示有何不同?”

一些开始学习CSS的人可能会这样想。使用Flexbox可以轻松实现传统上使用javascript和其他CSS属性实现的复杂布局设计。它很有可能在将来成为设计的主流,我想确保自己能够理解和使用它。与其他CSS属性相比,Flexbox的覆盖范围更广,因此初始学习成本很高,但这是值得的。对于那些在边距和填充方面难以调整的人来说,学习它应该给您带来很大的安全感。

这次,我将解释CSS3中引入的Flexbox,以便即使是初学者也可以轻松理解它。

[对于初学者]仔细解释如何编写CSS(样式表)

什么是Flexbox?

Flexbox是一种布局模式,允许您使用短代码灵活地“放置” CSS中的元素。如果您是初学者,则在听到“ placement”一词时可能会想到诸如“ float”,“ display”和“ margin”之类的属性。当然,这非常方便,但是如果您不理解和使用每个习惯,布局将会崩溃,或者您将不得不进行意外更改。使用Flexbox,您不必为此担心。

目前,它还与大多数浏览器兼容。

支持的浏览器

使用Flexbox的效果

  • 在元素内轻松进行垂直和水平排列(无需编写复杂的代码)。
  • 无论HTML中元素的顺序如何,您都可以仅使用CSS来自由更改显示顺序。
  • 您可以灵活地指定元素之间的宽度,并且即使元素中的数量不同,也可以调整高度和宽度。
  • 您不必太担心元素之间的边距设计。

Flexbox功能

Flexbox的功能是,设置flex的父元素将其性质更改为所谓的“ 柔性容器”,而其子元素会自动更改为所谓的“ 柔性项”,具体取决于父元素的Flex属性的设置。可以灵活地更改元素的排列和顺序。

在Flexbox中,关键是要在更改子元素的排列时在父元素中放置“ display:flex;”。这会将父元素更改为“ 柔性容器”,并将子元素更改为“ 柔性项”,这是基础。

.親要素{
  display: 柔性;
}

Flex属性和值的鸟瞰图

但是,必须指定同时指定排列和顺序的属性以及它提供的值。在学习Flexbox时,很难首先了解此属性的特性。下图列出了可与此Flexbox一起使用的属性和值。从整体上看,有些人可能会立刻感到被拒绝。但是,它很容易指定,建议一次检查所有行为。
点击这里了解更多详细信息

元件 物业名称 描述
Flex容器(安装在父元素上) 弹性方向(确定元素的方向) 行(初始值) 从左到右排列子元素。无需设置即可获得相同的效果。
反向行 从右到左排列子元素。认为它与行相反。
从上到下排列子元素。如果设置display:flex;,“ 弹性方向:row;”的效果将自动出现,因此,如果不这样做,请设置“ 柱”。在某些情况下,它会在响应时使用。
列反转 从下到上放置子元素。认为它与专栏相反。
柔性包装 Nowrap(初始值) 子元素从左到右排列,但没有包装,因此即使减小了屏幕尺寸,它们仍保持一行。
包装子元素。
绕回 如果子元素超出了容器的宽度,则将其包装并从下到上多行排列。
弹性流(批量设置) 您可以一起编写“ 弹性方向”和“ 柔性包装”。例如,您可以通过将它们全部一起编写来减少代码量,例如“ 柔性流:行换行;”。
证明内容(水平放置) 弹性启动(初始值) 您可以控制水平放置。在flex-start中,将元素左对齐。
柔性端 与flex-start相反,元素是右对齐的。
中央 元素在水平方向上放置在中心。可以获得与“ margin:0 汽车;”相同的效果。
间隔 尽管它是水平排列的,但第一个和最后一个子元素的排列整齐,在容器的两端没有空白。其余元素以均匀的边距排​​列。
周围空间 在水平排列中,所有元素均以均匀的边距排​​列。与间隔之间的区别是容器的两端是否有边距。
对齐项目 拉伸(初始值) 您可以控制垂直位置。将根据父元素的高度或元素中最高子元素的高度进行排列。
弹性启动 元素从父元素的开始位置开始排列,并在顶部对齐。
柔性端 元素从父元素的端点开始排列,并以底部对齐的方式排列。
中央 它将垂直排列在中间。
基准线 布局将在基线对齐。 /吨>
对齐内容 拉伸(初始值) 您可以控制多个元素的放置,但是将根据父元素或子元素中最高元素的高度来放置。
弹性启动 它从父元素的开始位置以顶部对齐的方式排列多个元素。
柔性端 它将多个元素从父元素的端点向下对齐。
中央 它将多个元素垂直对齐并居中。
间隔 顶部和底部子元素放置在没有边缘的顶部和底部边缘,其余元素放置在均匀的边缘。
周围空间 它将零件和子元素以均匀的边距布置在底部。
Flex项目(安装在子元素上) 顺序(元素顺序) 初始值为0。您可以更改元素的顺序,而与HTML顺序无关。
弹性成长 排列完元素后,如果父元素中有多余的空间,则可以确定为其指定了flex-grow的子元素相对于其他子元素增长了多少。负值无效。
(减少元素) 它具有弹性增长的相反效果,您可以决定收缩的程度。如果父元素中没有多余的空间并且所有元素都不适合,则为其指定了flex-grow的子元素将以相对于其他子元素缩小的设置值缩小。负值无效。
弹性基础(元素的宽度) 您可以像width属性一样指定宽度值(百分比或像素值)。
柔性(批量设置) 如果仅指定flex属性,则可以一次指定“ 弹性成长”,“ 弯曲收缩”和“ 弹性基础”。初始值为“ 柔性:0 1 汽车;”。
自我对齐(子元素的垂直对齐) 汽车 父元素align-items的值是继承的。
伸展 根据父元素和最高元素的高度进行排列。
弹性启动 它从父元素的起始位置对齐。
柔性端 它从父元素的端点开始在底部对齐。
中央 将元素居中。
基准线 在基线处对齐元素。

让我们立即检查上述行为。

如何使用Flexbox容器属性和值

为了检查Flexbox的行为,我将基于以下HTML代码进行解释。



<div class="flexcontainer">
      


<div class="flexitem item1">Item 1</div>



      


<div class="flexitem item2">Item 2</div>



      


<div class="flexitem item3">Item 3</div>



      


<div class="flexitem item4">Item 4</div>



      


<div class="flexitem item5">Item 5</div>



    </div>



.flexitem{
  width: 100%;
  height: 100px;
  text-align: 中央;
}

.item1{
  background: #009933;
}

.item2{
  background: #0066FF;
}

.item3{
  background: #CC6666;
}

.item4{
  background: #CC66FF;
}

.item5{
  background: #FF33CC;
}

显示如下。

在此处指定“ display:flex;”。

.flexcontainer{
  display: 柔性;
}

就是这样,但是您可以轻松地看到元素并排。

此外,flexbox的优点是您可以详细指定此元素的位置。主要是,您可以指定起点和边距设置。指令有两种主要类型。父级flex容器的说明和子级flex项的说明。每个都有其自己的属性和值,因此让我们看一下每个属性和值。

对Flex容器的说明

柔性box的优点是,即使使用父元素的指令也可以控制和安排子元素。除了上面的“ display:flex;”设置外,还有几个属性可让您指定放置的起点和边距设置。

弹性方向

“弯曲方向”属性指示元素放置的方向。

将“行”作为值会导致从左到右的水平排列。

.flexcontainer{
  display: 柔性;
  弹性方向: 行;
}

这与“ display:flex;”具有相同的效果。

反向行

在“行”的情况下,元素从左到右排列,但是在“行反转”中,元素从右到左排列。

.flexcontainer{
  display: 柔性;
  弹性方向: 反向行;
}

显示与“行”相反。

现在,如果您想做出响应,则可能需要垂直切换布局。在这种情况下,“列”从上到下排列元素。

.flexcontainer{
  display: 柔性;
  弹性方向: 柱;
}

显示已返回到设置“ display:flex;”之前的状态,但这不是禁用“ display:flex;”,而是有意将元素从上到下放置。是。

列反转

“列反转”实现了元素从下到上的垂直排列,而不是元素从上到下的垂直排列。

.flexcontainer{
  display: 柔性;
  弹性方向: 列反转;
}

显示如下。

柔性包装

“ Flex-wrap”包装子元素。为了便于说明,按如下所示增加显示元素。



<div class="flexcontainer">
      


<div class="flexitem item1">Item 1</div>



      


<div class="flexitem item2">Item 2</div>



      


<div class="flexitem item3">Item 3</div>



      


<div class="flexitem item4">Item 4</div>



      


<div class="flexitem item5">Item 5</div>



      


<div class="flexitem item6">Item 6</div>



      


<div class="flexitem item7">Item 7</div>



      


<div class="flexitem item8">Item 8</div>



      


<div class="flexitem item9">Item 9</div>



      


<div class="flexitem item10">Item 10</div>



    </div>



仅设置“ display:flex;”的状态如下。

Nowrap

如果设置“ Nowrap”,则该元素将永远不会环绕。无论增加多少元素,它都是一条水平线。

.flexcontainer{
  display: 柔性;
  柔性包装: Nowrap;
}

它将显示如下。

在此处添加“ 柔性包装:wrap;”。而且,子元素的宽度为30%。然后,将折叠伸缩容器宽度之外的元素。

.flexcontainer{
  display: 柔性;
  柔性包装: 包;
}

.flexitem{
  width: 30%;
  height: 100px;
  text-align: 中央;
  font-size: 40px;
  color: #fff;
}

它将显示如下。

绕回

“换行反转”是一种从左下方开始水平排列元素的属性。

.flexcontainer{
  display: 柔性;
  柔性包装: 绕回;
}

它将显示如下。

柔性流

“ Flex-flow”是批处理设置的属性。可以同时设置“ Flex-direction”和“ 柔性包装”。可以这样写。

.flexcontainer{
  display: 柔性;
  柔性流: 行 包;
}

证明内容

“合理化内容”用于在水平方向上排列元素。

弹性启动

这是初始值,并且元素从左边缘到右边缘排列。为了清楚起见,减少了元件的数量。



<div class="flexcontainer">
      


<div class="flexitem item1">Item 1</div>



      


<div class="flexitem item2">Item 2</div>



      


<div class="flexitem item3">Item 3</div>



      


<div class="flexitem item4">Item 4</div>



      


<div class="flexitem item5">Item 5</div>



    </div>



.flexcontainer{
  display: 柔性;
  证明内容: 弹性启动;
}

它将显示如下。

柔性端

“ 弹性启动”从左到右排列元素,而“ 柔性端”从右到左排列元素。

.flexcontainer{
  display: 柔性;
  证明内容: 柔性端;
}

.flexitem{
  width: 10%;
  height: 100px;
  text-align: 中央;
  font-size: 40px;
  color: #fff;
}

如下所示,它显示在右侧。

中央

“居中”使容器内水平排列的元素居中。

.flexcontainer{
  display: 柔性;
  证明内容: 中央;
}

元素居中,如下所示。

间隔

“之间的空间”将元素均匀分布。那时,两端的元件与容器的两端紧密接触而没有任何余量。

.flexcontainer{
  display: 柔性;
  证明内容: 间隔;
}

它将显示如下。

当我使用验证工具对其进行检查时,两端的元素上都没有空白。

周围空间

与“之间的空间”一样,元素均匀排列,但每个元素都留有边距。

.flexcontainer{
  display: 柔性;
  证明内容: 周围空间;
}

它将显示如下。

如果使用验证工具进行检查,则两端的元素也会有边距。

对齐项目

“对齐内容”确定水平对齐方式,而“对齐项目”确定垂直对齐方式。

伸展

“ Stretch”是初始值。它将高度调整为最高元素。为了清楚起见,包括了不同长度的文本。



<div class="flexcontainer">



<div class="flexitem item1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse .</div>



      


<div class="flexitem item2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div>



      


<div class="flexitem item3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>



      


<div class="flexitem item4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>



      


<div class="flexitem item5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</div>



</div>



而且,高度被去除。

.flexcontainer{
  display: 柔性;
  对齐项目: 伸展;
}

.flexitem{
  width: 30%;
  text-align: 中央;
  font-size: 20px;
  color: #fff;
}

它将显示如下。您可以看到所有元素的高度都匹配。

弹性启动

“柔性启动”从上到下垂直排列元素。

.flexcontainer{
  display: 柔性;
  对齐项目: 弹性启动;
}

它将显示如下。根据每个元素显示高度。

柔性端

“ 柔性端”与“ 弹性启动”相反,并且元素从下到上排列。

.flexcontainer{
  display: 柔性;
  对齐项目: 柔性端;
}

它将显示如下。

中央

“中心”是垂直的,将元素居中。

.flexcontainer{
  display: 柔性;
  对齐项目: 中央;
}

它将显示如下。

基准线

布置“基线”,以使字符的基线对齐。

.flexcontainer{
  display: 柔性;
  对齐项目: 基准线;
}

它将显示如下。

对齐内容

“对齐内容”确定元素在多行中的对齐方式。

伸展

“拉伸”是指使用“ 柔性包装:warp;”包裹元素时,如果未设置子元素的高度,则子元素的高度会自动调整为父元素的高度。调整

.flexcontainer{
  display: 柔性;
  柔性包装: 包;
  对齐内容: 伸展;
  height: 500px;
}

高度将自动设置为与父元素的高度匹配,如下所示。

弹性启动

“柔性启动”将元件对齐到较高位置,然后将元件向下排列。

.flexcontainer{
  display: 柔性;
  柔性包装: 包;
  对齐内容: 弹性启动;
  height: 500px;
}

它将显示如下。

柔性端

“ Flex-end”将元素从父元素下方放置。

.flexcontainer{
  display: 柔性;
  柔性包装: 包;
  对齐内容: 柔性端;
  height: 500px;
}

安排如下。

中央

“居中”是元素的居中。

.flexcontainer{
  display: 柔性;
  柔性包装: 包;
  对齐内容: 中央;
  height: 500px;
}

元素居中,如下所示。

间隔

“之间的空间”将元素垂直垂直分布。那时,上端和下端的元素都紧紧位于父元素的上方和下方。

.flexcontainer{
  display: 柔性;
  柔性包装: 包;
  对齐内容: 间隔;
  height: 500px;
}

它将显示如下。

如果使用验证工具进行检查,则可以看到上下元素的排列没有边距。

周围空间

“之间的空间”将元素垂直垂直分布。那时,顶端和底端的元素包括边距。

.flexcontainer{
  display: 柔性;
  柔性包装: 包;
  对齐内容: 周围空间;
  height: 500px;
}

它将显示如下。

如果使用验证工具进行检查,则可以看到上部和下部元素均已包含并排列。

Flex项目说明

到目前为止,我们已经通过向父元素提供指令来放置元素,但是从现在开始,我们将向子元素本身提供指令。

订购

您可以通过在“ 订购”属性中指定一个数值来更改元素的顺序。首先,未指定顺序的状态如下。



<div class="flexcontainer">
      


<div class="flexitem item1">Item 1</div>



      


<div class="flexitem item2">Item 2</div>



      


<div class="flexitem item3">Item 3</div>



      


<div class="flexitem item4">Item 4</div>



      


<div class="flexitem item5">Item 5</div>



    </div>



.flexcontainer{
  display: 柔性;
}

.flexitem{
  width: 30%;
  height: 100px;
  text-align: 中央;
  font-size: 30px;
  color: #fff;
}

它将显示如下。

接下来,在子元素中放置“ 订购”属性和一个表示顺序的数值。

.flexcontainer{
  display: 柔性;
}

.flexitem{
  width: 30%;
  height: 100px;
  text-align: 中央;
  font-size: 30px;
  color: #fff;
}

.item1{
  background: #009933;
  订购: 4;
}

.item2{
  background: #0066FF;
  订购: 3;
}

.item3{
  background: #CC6666;
  订购: 5;
}

.item4{
  background: #CC66FF;
  订购: 1;
}

.item5{
  background: #FF33CC;
  订购: 2;
}

顺序是任意指定的,但是元素的顺序已按照指示进行了更改。

弹性成长

“ Flex-grow”允许您指定当父元素具有边距时,特定元素的宽度相对于边距可以增加多少。例如,存在左对齐的元素,如下所示。将其设置为“ 弹性成长”。

.flexcontainer{
  display: 柔性;
}

.flexitem{
  width: 10%;
  height: 100px;
  text-align: 中央;
  font-size: 30px;
  color: #fff;
}

.item1{
  background: #009933;
  弹性成长: 3;
}

.item2{
  background: #0066FF;
  弹性成长: 1;
}

.item3{
  background: #CC6666;
  弹性成长: 1;
}

.item4{
  background: #CC66FF;
  弹性成长: 1;
}

.item5{
  background: #FF33CC;
  弹性成长: 1;
}

然后,使用边距拉伸指定的元素。将“ 弹性成长:1;”视为默认大小。

弯曲收缩

“ Flex-shrink”与“ 弹性成长”相反,它允许您指定如果父元素没有边距,则可以将特定元素减少到该边距的数量。例如宽度

.flexcontainer{
  display: 柔性;
}

.flexitem{
  width: 30%;
  height: 100px;
  text-align: 中央;
  font-size: 30px;
  color: #fff;
}

.item1{
  background: #009933;
  弯曲收缩: 3;
}

.item2{
  background: #0066FF;
  弯曲收缩: 2;
}

.item3{
  background: #CC6666;
  弯曲收缩: 1;
}

.item4{
  background: #CC66FF;
  弯曲收缩: 1;
}

.item5{
  background: #FF33CC;
  弯曲收缩: 1;
}

默认值为1,数字越大,减少量越大。

弹性基础

“ Flex-basis”指定子元素的宽度。 “自动”反映子元素的原始宽度。

.flexcontainer{
  display: 柔性;
}

.flexitem{
  height: 100px;
  text-align: 中央;
  font-size: 30px;
  color: #fff;
}

.item1{
  background: #009933;
  弹性基础: 40%;
}

.item2{
  background: #0066FF;
  弹性基础: 30%;
}

.item3{
  background: #CC6666;
  弹性基础: 20%;
}

.item4{
  background: #CC66FF;
  弹性基础: 5%;
}

.item5{
  background: #FF33CC;
  弹性基础: 5%;
}

您可以看到指定的宽度与“宽度”具有相同的效果。

柔性

到目前为止,“ Flex”是可以为所有子元素指定的属性。

.flexcontainer{
  display: 柔性;
}

.flexitem{
  height: 100px;
  text-align: 中央;
  font-size: 30px;
  color: #fff;
}

.item1{
  background: #009933;
  柔性: 2 0 30%;
}

.item2{
  background: #0066FF;
}

.item3{
  background: #CC6666;
}

.item4{
  background: #CC66FF;
}

.item5{
  background: #FF33CC;
}

指定如下。宽度指定为30%,但是您可以看到“ 弹性成长”有效并且填充了边距。

自我调整

此属性确定垂直放置。您可以获得与为父元素指定的align-items相同的效果。尽管已为子元素指定,但“ 自我调整”优先于“ align-item”。该行为与“ align-item”相同,因此省略了示例代码。

汽车

如果指定此选项,则继承“ align-item”规范。

伸展

如果指定了此项,则如果父元素的高度中有空间,则将使用边距来增加高度。

弹性启动

如果指定,则该元素从父元素的顶部开始位置向下放置。

柔性端

如果指定,则将元素从父元素的底部开始位置向上放置。

中央

如果指定,则该元素在父元素上垂直居中。

基准线

如果指定了此选项,则放置元素时会假定字符基线位于父元素的垂直方向。

实践:使用Flexbox创建设计

让我们开始使用Flexbox进行设计。这次,我将进行以下屏幕显示。这次,我将仅使用flexbox的功能而不使用引导程序或网格布局。

布局

有两点。并排排列宽度不同的元素,水平排列相同宽度的元素。

HTML-1

文件夹结构如下。

准备以下HTML。我将从现在开始对此进行编码。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>サンプル-Flexbox</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  


<div class="container">

      ここに要素を追加します。
      
  </div>



</body>
</html>

创建顶级HTML

现在,按如下所示在上部安装HTML代码。上部具有两列结构,但宽度应相同。
使用虚拟图像时,这里请参阅。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>サンプル-Flexbox</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  


<div class="container">
       


<div class="first-row">
      


<div class="image-area r-1">
                <img src="http://lorempixel.com/800/400" />
      </div>




      


<div class="discription-area r-1">
        


<h1>Business Experience</h1>



        

This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!

        <a class="btn" href="#">Call to Action!</a>
      </div>




    </div>



  </div>



</body>
</html>

第一行块中包含两个元素“图像区域”和“描述区域”。虚拟图像放置在“图像区域”中,h标签,p标签和按钮放置在“描述区域”中。显示如下。

*由于使用了虚拟图像,因此图像将改变。

创建顶级CSS

接下来,设置CSS。关键是我将“ display:flex;”设置为父类的“ .first-row”并创建了一个flex容器。这使元素并排放置。接下来,调整宽度,将“ 弹性基础:50%;”设置为“ discription-area”。

.first-row{
  display: 柔性;
}

.r-1{
  margin: 5px;
}

.image-area{
  overflow: hidden;
}

.image-area img{
  width: 100%;
  height: 汽车;
}

.discription-area{
  弹性基础: 40%;
  padding: 20px;
}

.btn{
  color: #fff;
  padding: 15px 25px;
  width: 30%;
  background: #1b95e0;
  border-radius: 10px;
}

将显示以下内容。

如果要为上部元素指定不同的宽度,请为每个子元素设置“ 弹性基础:40%;”,如下所示。

.first-row{
  display: 柔性;
}

.image-area{
  overflow: hidden;
  柔性: 1;
}

.discription-area{
  弹性基础: 40%;
  padding: 20px;
}

创建底部HTML

接下来是底部的HTML。其特点是每个句子的长度都不同。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>サンプル-Flexbox</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  


<div class="container">

      


<div class="first-row">
        


<div class="image-area r-1">
          <img src="http://placekitten.com/g/800/400">
        </div>




        


<div class="discription-area r-1">
          


<h1>Business Experience</h1>



          

This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!

          <a class="btn" href="#">Call to Action!</a>
        </div>




      </div>




      


<div class="title">
        


<h4>This call to action card is a great place to showcase some important information or display a clever tagline!</h4>



      </div>




      


<div class="second-row">
        


<div class="card card-1">
            


<div class="card-body">
              


<h2 class="card-title">Card One</h2>



              

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.

            </div>



            


<div class="card-footer">
              <a href="#" class="btn">More Info</a>
            </div>



        </div>




        


<div class="card card-2">
            


<div class="card-body">
              


<h2 class="card-title">Card Two</h2>



              

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque.

            </div>



            


<div class="card-footer">
              <a href="#" class="btn">More Info</a>
            </div>



        </div>




        


<div class="card card-3">
            


<div class="card-body">
              


<h2 class="card-title">Card Three</h2>



              

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.

            </div>



            


<div class="card-footer">
              <a href="#" class="btn">More Info</a>
            </div>



        </div>



      </div>




  </div>



</body>
</html>

底部的HTML代码垂直排列,如下所示。

现在,我们为此设置CSS。将“ display:flex;”设置为父元素“ second-row”。另外,设置“正当内容:间隔;;”,以使元素均匀对齐并且边缘对齐。

.title{
  padding: 5px;
  border: 1px solid #17a2b8;
  border-radius: 10px;
  background: #17a2b8;
  color: #fff;
  text-align: 中央;
}

.second-row{
  display: 柔性;
  柔性包装: 包;
  证明内容: 间隔;
}

.card{
  border: 1px solid #6c757d;
  border-radius: 5px;
  padding: 20px;
  margin: 5px;
  width: 28%;
  min-height: 350px;
  position:relative;
}

.card-footer{
  position:absolute;
  bottom: 0;
  padding-bottom: 20px;
  margin-left: 汽车;
  margin-right: 汽车;
}

然后,您可以看到,即使句子的长度不同,它们也会在相同的框高处水平地均匀分布。最初,盒子的高度根据句子的长度而不同,并且可以通过“ max-height”等进行调整,但是如果使用flexbox,则没有必要。

也可以忽略原始排列而更改元素的顺序。例如,让我们将以下内容添加到CSS中。

.card-1{
  订购: 3;
}

.card-2{
  订购: 1;
}

.card-3{
  订购: 2;
}

然后顺序改变了。

例如,如果使它响应在手机或平板电脑上显示,则可能需要更改元素显示的方式,这种情况经常使用。例如,让我们在CSS的媒体查询中指定一个断点。

@media screen and (min-width: 320px) {

.second-row{
  display: 柔性;
  弹性方向: 柱; =>カラムを縦に配置
}

.card-1{
  订购: 3;
}

.card-2{
  订购: 1;
}

.card-3{
  订购: 2;
}

.card-body{
  margin-bottom: 40px;
}

您可以看到效果。列更改为垂直排列,以您最想看到的列的顺序。

概要

您已经发现flexbox属性允许您用少量的代码一次完成“浮动”和“边距”的放置。

作为使用Flexbox的CSS框架布尔玛也很普遍,一旦您了解了Flexbox并检查了它的行为,使用这样的框架将进一步提高Web设计的水平。

顺便说一句,如果你想学习编程技术推动被推荐。该课程将根据学习目的量身定制。

我们提供免费咨询,因此请查看。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。