CSS 弹性盒子

使用 display: flex 定位两个盒子
只要在一个元素的 CSS 中添加 display: flex;,就可以使用其它 flex 属性来构建响应式页面了。

使用 flex-direction 属性创建一个行
给元素添加 display: flex 属性可以让它变成 flex 容器, 然后可以让元素的项目排列成行或列。 只要给父元素添加 flex-direction 属性,并把属性值设置为 row 或 column,即可横向排列或纵向排列它的所有子元素。

<style>
  #box-container {
    display: flex;
    height: 500px;
    flex-direction: row-reverse;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }
  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

使用 flex-direction 属性创建一列

<style>
  #box-container {
    display: flex;
    height: 500px;
    flex-direction: column;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }
  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

使用 justify-content 属性对齐元素
子元素排列的方向被称为 main axis(主轴)。 对于行,主轴水平贯穿每一个项目; 对于列,主轴垂直贯穿每一个项目。

对于如何沿主轴线排放 flex 项目,有几种选择。 很常用的一种是 justify-content: center;:即 flex 子元素在 flex 容器中居中排列。

<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    justify-content: center;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

在这里插入图片描述

除了center 还有其他选择包括:

flex-start: 从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边, 对于列是把项目移至顶部。 如未设置 justify-content 的值,那么这就是默认值

flex-end: 从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边, 对于列是把项目移至底部。

space-between:项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如,在行中第一个项目会紧贴着容器左边,最后一个项目会紧贴着容器右边,然后其他项目均匀排布。

space-around: 与space-between相似,但头尾两个项目不会紧贴容器边缘,所有项目之间的空间均匀排布。

space-evenly:在 flex 项目之间均匀分配空间,在 flex 容器的任一端都有一个完整的空间。

使用 align-items 属性对齐元素

CSS 中的 align-items 属性用来定义 flex 子元素沿交叉轴的对齐方式。 对行来说,定义的是元素的上下对齐方式; 对列来说,是定义元素的左右对齐方式。

<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    align-items: center;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 200px;
    font-size: 24px;
  }

  #box-2 {
    background-color: orangered;
    width: 200px;
    font-size: 18px;
  }
</style>

<div id="box-container">
  <div id="box-1"><p>Hello</p></div>
  <div id="box-2"><p>Goodbye</p></div>
</div>

在这里插入图片描述
align-items 的可选值包括:

flex-start:从 flex 容器的起始位置开始对齐项目。 对行来说,把项目移至容器顶部; 对列来说,是把项目移至容器左边。

flex-end:从 flex 容器的终止位置开始对齐项目。 对行来说,把项目移至容器底部; 对列来说,把项目移至容器右边。

center:把项目居中放置。 对行来说,垂直居中(项目距离顶部和底部的距离相等); 对列来说,水平居中(项目距离左边和右边的距离相等)。

stretch: 拉伸项目,填满 flex 容器。 例如,排成行的项目从容器顶部拉伸到底部。 如未设置align-items的值,那么这就是默认值。

baseline: 沿基线对齐。 基线是文本相关的概念,可以认为它是字母排列的下端基准线。

使用 flex-wrap 属性包裹一行或一列
CSS flexbox 具有将 flex 容器拆分为多行(或列)的功能。 默认情况下,flex 容器会调整项目大小,把它们都塞到一起。 对于行来说,所有项目都会在一条直线上。

不过,使用 flex-wrap 属性可以使项目换行展示。 这意味着多出来的子元素会被移到新的行或列。 换行发生的断点由子元素和容器的大小决定。

nowrap:默认值,不换行。
wrap:如果排列以行为基准,就将行从上往下排列;如果排列以列为基准,就将列从左往右排列。
wrap-reverse:如果排列以行为基准,就将行从下往上排列;如果排列以列为基准,就将列从右往左排列。

<style>
  #box-container {
    background: gray;
    display: flex;
    height: 100%;
    flex-wrap: wrap;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 50%;
  }
  #box-3 {
    background-color: violet;
    width: 25%;
    height: 50%;
  }
  #box-4 {
    background-color: yellow;
    width: 25%;
    height: 50%;
  }
  #box-5 {
    background-color: green;
    width: 25%;
    height: 50%;
  }
  #box-6 {
    background-color: black;
    width: 25%;
    height: 50%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
  <div id="box-3"></div>
  <div id="box-4"></div>
  <div id="box-5"></div>
  <div id="box-6"></div>
</div>

在这里插入图片描述
变换成,增加可读性:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值