flex布局单独一行_Flexbox 布局入门

dda5973b1d3ebaa40c0177a8c743ff0a.png

互联网早期实现布局是需要通过多种不同属性组合才能实现我们想要的布局。

比如常见的垂直居中,刚接触 css 的朋友看到 vertical-align: middle; 这个属性可能就会认为它就是用于垂直居中的,但实际上并没有那么简单。如果想要通过该属性来实现垂直居中,还需要其他小伙伴配合。

<style>
.container {
    
  width: 200px;
  height: 200px;
  border-radius: 6px;
  text-align: center;
  color: #fff;
  background: #e44b27;
  white-space: nowrap;
}

/* 该伪类是实现垂直居中关键 */
.container:after {
    
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.content {
    
  display: inline-block;
  white-space: normal;
  vertical-align: middle;
  text-align: left;
}
</style>

<div class="container">
  <div class="content">我想居中!</div>
</div>

这样看来,为了实现垂直居中布局,我们还得打一套组合拳才能出来才行,是不是看起来有点麻烦的样子?

W3C 在 2009 年提出的 Fiexbox(flex) 布局草案,就是针对用户界面设计优化的 CSS 盒模型。如果使用 flex 布局来实现上面的垂直居中布局的话,可以简化为:

<style>
.container {
    
  width: 200px;
  height: 200px;
  border-radius: 6px;
  color: #fff;
  background: #e44b27;

  /* 使用 flex 布局 */
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<div class="container">
  <div>我想居中!</div>
</div>

修改后的代码就显得更精简了,也不需要其他小伙伴来搭把手。布局的事情就让 flex 家族自己来解决即可。


目录

  • 概念
  • Flex 容器属性
    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content
  • Flex 元素属性
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self
    • order
  • 兼容性
  • 结束
  • 参考资料

概念

应用 flex 布局的容器我们通常称为 弹性盒子/容器(flex container)。弹性容器可以由 display: flexdisplay: inline-flex 生成。弹性盒子的子项常称为 弹性元素/项目(flex items),它以 flex 布局模型进行布局。

.container {
    
  display: flex | inline-flex;
}

如果想要学习 flex 布局的工作方式,最先需要学习的是它自身的术语。下面直接引用 flex 草案中术语的介绍图:

df4ce01dd0c463f0bb3776d1b924b4d9.png

别被原版英文术语给吓倒了,咱们翻译一下其实就很好理解了:

4b739b096f1aaee22285b87ac32f5dea.png

在术语示意图中可以看到两根轴,分别是主轴(main axis)垂直交叉轴(cross axis)。同时标注了主轴起点(main start)终点(main end)交叉轴的起点(cross start)终点(cross end)

默认情况下 flex 布局是按主轴的方向进行布局的。flex 元素所占据的 主轴空间(main size) 就是 flex 元素的宽度(width)、所占据的 交叉轴空间(cross size) 就是 flex 元素的高度(height)。


flex 容器属性

flex 容器里可以通过以下几种属性来控制容器的行为:

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

为了更好的观察各属性的行为,笔者在 codepen 上给不同属性都写了 demo 做参考。

目前有个新规范(CSS Box Alignment Module Level 3)正处于工作草案的状态中,对一些属性添加新值,比如 [first|last]? baselineself-startself-endstartendleftrightunsafe |

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值