flex布局相关知识

首先:请出一个三个盒子

 

(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