首先:请出一个三个盒子
(1)定义一个盒子要写上长宽和背景颜色。
(2)这个背景可以用bkc缩写
(3)三个盒子是一起定义的,没有独立属性。
(4)<section>中的div盒子可以各自定义盒子属性,
常用的一种让盒子拥有不同属性的方法(这种方法要学会)
知识点一:为什么要学习flex布局?
答:现在人们常用手机端进行网页,小程序浏览,每个人的手机屏幕并不是一样大的,所以就可能涉及到元素的缩放。所以要用flex布局。
知识点二:flex布局的基本知识
答:flex布局是flexible box的缩写。
flex布局=弹性布局=伸缩布局=伸缩盒布局
!当我们为父盒子设为flex布局后,子元素中的float,char等属性会消失。
--每一个容器都可以指定为flex布局
知识点三:flex布局基本原理
答:采用flex布局,称为flex容器(flex container)
所有子元素都会被称为flex项目(flex item)
知识点四:flex布局有6种常见父项属性
(1)设置主轴方向 flex-direction.
!flex布局有主轴和侧轴之分,主轴一般默认指的是x轴。
但是主轴不是一成不变的,可以设置
a.属性值:
row:从左到右(这个一般是默认的,可以不写)
row-reverse:从右到左
clumn:从上到下
clumn-reverse:从下到上
b.使用方法
首先要在<style>标签中先定义flex布局
display:flex;
然后再使用
e.g flex directon:row;
(2)设置主轴上元素排列的形式justify-content
属性
flex-start:从左到右
flex-end:从右开始最后占满
center:居中
space-around 平分剩余空间
space-between 先把左右占满,然后平分剩余空间
用法:先定义父类 display:flex
再设置主轴 flex direction:row
再用justify-content
(3) 设置主轴是否需要换行 flex-warp
一般情况下在flex布局中是不会换行的就算挤不下,也会使盒子缩小而不会换行
属性
nowarp 不换行
warp 换行
(4) 侧轴上元素的排列方式 (仅仅只有一行)
align-items
属性
flex-start
flex-end
center
stretch 纵向拉伸
(5)测轴上元素排列方式(很多行)
align-content
属性:
flex-start
flex-end
center
space-around
space-between
stretch
(5)flex-flow
这是设置主轴和是否换行的复合标签
e.g flex-flow: column no warp;
知识点五:常见flex子项属性
(1)flex属性
定义子项目分配剩余空间,用flex表示占用多少份数
语法:
.item {
flex:<number> ;
}
(2)align-self:控制子项自己在侧轴上的排列方式
允许单个项目与其他项目有不一样的对齐方式
(3) order属性定义盒子排列顺序
数值越小排列越靠前,默认为0