flex布局语法+实例
一、什么是flex布局 flex 是 flexible box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 flex 布局。 你可以将前端页面想象成一个巨大的容器,里面装满了各式各样的盒子元素,为了方便元素排列布局,css引入弹性布局。即设置了弹性布局的元素,他的大小和对齐方式将更加灵活的随着他所处空间的大小而改变。 任何元素都可以使用flex布局,不区分行内、块级元素。注意:webkit 内核的浏览器,必须加上-webkit前缀。且设为 flex 布局以后, 子元素的float、clear和vertical-align属性将失效 。 二、flex布局中的基本概念 1.容器 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。我更喜欢称为父容器和子容器。容器具有这样的特点:父容器可以统一设置子容器的排列方式,子容器也可以单独设置自身的排列方式, 如果两者同时设置,以子容器的设置为准。 2.轴线 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end