2020-12-24 flex布局（弹性布局）

flex布局（弹性布局）

     diplay:flex

父元素属性

1. flex-direction（设置主轴方向）

     flex-direction:  row  / row-reverse  /   column  /  column-reverse

2.justify-content(设置主轴元素的排列方式)

    justify-conten: center /   space-around  /  space-between
                           / flex-start  /  flex-end

3.align-content(设置侧轴的排列方式)（多行/单行无效）

     align-content:center  /  space-around  /  space-between  /  flex- 
                     start    / flex-end   stretch

4.align-items( 设置侧轴的排列方式)（单行/多行无效）

align-items:center   flex-start  flex-end  stretch

5.换行

 flex-wrap (默认不换行nowrap)

子元素属性

1.flex

flex:(number)、(x%)

1.flex相加的和等于把最近一级的父元素所分的份数，每一个子元素的flex值等于所占父元素的相应比例
2.如过盒子的宽度大于或者小于flex分配的宽度，则宽度以flex分配为准，自身宽度无效
3.如果盒子里边有图片，则以图片的宽度为准，flex无效。
如果想要图片与父盒子宽度保持一致，则 img{width:100%}

2.order

order:(number)

可以对子元素有小到大进行排队，默认值为0

3.align-self

默认值为auto, 允许子元素有不同的排列方式，可覆盖 align-ittems

问题补充

1. display=flex 相关

   1）父元素如果是行元素，对其添加宽高无效，如果再给其添加 display=flex ,进行弹性布局，则可将其”转化“为块元素
   2）父元素进行弹性布局，如果没有给子元素添加高度，则默认拉伸与父元素高度相同

2.为什么要改变主轴方向
因为主轴方向是来决定元素排列方式的