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
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(拉伸)
一 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
二 细述
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(拉伸)