HTML中用弹性布局设置位置,HTML的flex弹性布局

flex 布局概述

1. flex 是什么flex 是 Flexible Box 的缩写,意为弹性布局

flex 2009 年就已出现,浏览器兼容性很好,请放心使用

2. flex 解决了什么问题块元素的垂直居中, flex 可以轻松解决

元素大小在容器中的自动伸缩,以适应容器的变化,特别适合移动端布局

3. flex 项目的布局方向是什么一个物体在一个平面中, 要么水平排列, 要么垂直排列, flex 借鉴了这个思想

flex 是一维布局, 项目任何时候只能沿一个方向排列,要么水平, 要么垂直

flex 项目排列的方向, 称为主轴, 水平和垂直二种

与主轴垂直的称为交叉轴(有的教程也称之为副轴/侧轴)

4. flex 布局中常用术语有哪些(三个二)序号

简记

术语

1

二成员

容器和项目(container / item)

2

二根轴

主轴与交叉轴(main-axis / cross-axis)

3

二根线

起始线与结束线(flex-start / flex-end)

flex弹性布局

/* 容器 */

.container{

width:300px;

height:150px;

}

/* 将容器/父元素设置为flex容器,布局只针对子元素、对孙子元素无效 */

.container{

display:flex;

/* inline-flex是针对多个容器的布局 */

display:inline-flex;

}

/* 项目/子元素 */

.item{

width:100px;

height:50px;

background-color:aqua;

font-size:2rem;

}

1