flex布局快速入门

发表于 阅读次数：

前言

因为某作业要求，要写html。而我对float流一窍不通…所以学习一下flex布局。

Flex布局简介

Flex是Flexible Box的缩写，也就是“弹性布局”，用于盒装模型。任意的容器都可以指定为Flex布局。

1
2
3
.box {
    display:flex;
}

注：Flex布局需要IE10或以上

值得注意的是设置为Flex布局后，子元素得到float、clear和vertical-align均会失效。

基本概念

采用Flex布局的元素，称作Flex容器（Flex container）,而容器的子元素成为Flex项目（Flex Item）。

  • 项目在默认情况下是没有间距的
  • 容器中默认存在两根轴，水平的是主轴(main axis)和垂直的交叉轴(cross axis)。

本文参考了阮一峰的flex教程。