flexbox学习

flexbox 基本概念

一 flexbox的布局由两部份组成：
1.flex container：容器
2.flex item  项目  


二 出现在flexbox上面的一些名词概念
1. main axis 容器主轴（水平轴）
主轴的两个点:
(1)main start(左边起点)
(2)main end(右边终点)

2. cross axis 容器十字轴|交叉轴（垂直轴）
(1)cross start(顶部点)
(2)cross end(下部点)

3.flex item概念
(1)main size(水平尺寸)
(2)cross size(垂直尺寸)

附图：

crosss tart
|
|
cross axis
|
main start---------------main axis--------------main end
|
cross end

二 细述

(一)  flex容器(flex container)
1.首先设置容器:
display:flex;        //设置好后，其内项目会自动成为flex
display:inline-flex; //成为行内容器，由内容撑开

(1)flex-direction
作用：控制其内项目排列方式(在主轴的排列方向;左~右)
值：row|row-reverse|column|column-reverse

值 //效果说明
row; //水平方向从main start开始排列
row-reverse; //水平方向从main end开始排列 | 也可以称为倒置;
column; //垂直方向堆叠在一起
column-reverse; //垂直方向堆叠倒置


(2)flex-wrap  
值：nowrap|wrap|wrap-reverse
作用：默认会在同一行上去显示，等于是不会换行：nowrap


wrap; //会根据浏览器容器的大小改变自动换行
wrap-reverse //会倒过元素并自动换行


(3)flex-flow 
作用：可以综合上面的(1)flex-direction 和 (2)flex-wrap的设置
默认值：flex-flow:row nowrap;


flex-flow:row-reverse wrap; //水平倒置 + 自动换行


(4)justify-content
作用：可以去调整项目的位置，项目与项目之间的间隔.
值：flex-start(默认值)|flex-end|center|space-between|space-around


flex-start; //左对齐
flex-end; //右对齐
center; //居中
space-between; //在项目之间添加一个"间隔"进行填充
space-around; //在项目之间及左右都会把间隔计算加进去


(5)align-items
作用：可以设置元素在垂直方向上的对齐方式.
值：stretch拉伸，让它跟容器的高度一样。(默认值)|flex-start|flex-end|center|space-between|space-around


flex-start; //全部移动到容器顶部
flex-end; //全部移动到容器底部
center; //部移动到容器中间
baseline; //靠着crosss tart(顶部)

(6)align-content:多行项目的对齐方式


(二)  Flex Item

1.order属性 可以决定该元素排列位置

2.flex-grow:1
可以让元素们均分同一行。相当于是该元素块为总数分之一的宽度


3.flex-shink:默认值为1。 表示该元素可以缩小的值，如果拉动窗口时，不想让宽度缩小，可以指定该元素的此值为0;


4.flex-basis:默认值为auto,表示元素的基本宽度。


5.使用flex可以直接设置以上三项   flex-grow|flex-shink|flex-basis
flex:0 1 auto;

3.align-self：auto    flex-end,flex-start,stretch(拉伸)