css重难点:flex布局

css重难点:flex布局

提要:作为前端学习,首先要知道每个属性都有什么作用,然后每一个属性一定要去试,试过才知道怎么去利用这个属性用到自己的项目当中.

一、准备知识,先简单了解flex布局

1. flex布局的设置

html

<div class="box">
</div>

css

//两个flex的属性,区别在于div是否为行内元素
.box{
 width:100px;
 height:200;
 display:flex/ inline flex;
}

2. 何为flex布局

我们把flex布局理解为一个全新的区域,里面的排布是的设置简化了当今网页的设计1.flex布局简图: flex布局由主轴和交叉轴组成,这样的理解是方便布局的设计,相当于我们x,y轴,但是他们的开始和结束位置是可以通过属性改变的.

2.flex布局分为两种属性类型： 一种是flex.container 这是指定整个flex元素的属性
另一种是flex.item这是指定flex元素里面的属性

二、flex布局专用属性介绍

1.flex.container(运用在整个设置flex属性的元素)

1.主轴

//决定主轴的方向
flex-direction:row(左到右)/row-reverse /column(上到下)/column-reverse

//单行还是多行(默认情况下所有的item都是会在同一行显示)
flex-wrap:wrap/wrap-reserve

//决定主轴对齐方式
justify-content: center居中/flex-start/flex-end/space-around/space-between


2.交叉轴

//在交叉轴(cross)对齐方式
align-item: baseline/center

//交叉轴上面多行时的对齐方式(相当于justify-content不同方向的用法)
align-content:依次排布的方式 flex-statr/flex-end/space-between

1.flex.item(运用在设置flex属性的元素的子元素)

1.
/*order:规定顺序-越小越前面*/
order:6

2.
/*align-self 覆盖align-items*/
align-self:flex-end

3.
/*flex-grow 默认:0 */ 
/*大于1的情况下平分剩下的宽度  小于1直接乘以小数得出的宽度,有可能分的完,有可能分不完*/
flex-grow:2 

4.
/*flex-shrink 收缩默认:1  -了解*/
如果小于1 大于1 情况要理解

5.
/*flex-basis 主轴上元素的宽度*/
//优先级: max-width  >  flex-basis > width > 内容 

6.
/*flex-可以指定1.2.3个值(不重要)*/
//flex:(不带单位) 代表grow
//flex:(带单位)   代表basis

ps:小编只是挑了一些比较常用到的知识的简单总结了一下,更多的还需要大家慢慢去研究,如果遇到困难也可以留言交流一下,谢谢支持