10分钟了解CSS3 FlexBox延展性合理布局

日期:2021-03-01 类型:科技新闻 

关键词:在线编辑图片,什么软件可以抠图,在线图片,p图软件电脑版,在线抠图

基础详细介绍

特性

  • flexbox是1种css display种类,出示1种更简易高效率的合理布局方法;
  • flexbox能够对元素相对父元素、弟兄元素开展精准定位、操纵规格、操纵间隔;
  • flexbox对回应式有很好的适用;

工作中基本原理

设定父元素的display特性为flex,则子元素都变为flex item,由此能够操纵子元素的排序方法、规格、间隔等;

适配性

Flex Container

先看来1个最简易的flex示例,外层div设定display: flex变成1个flex container,內部的3个div则全自动变成flex item:

html:

<div class="flex-container">
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
</div>

css:

.flex-container{ max-width: 960px; margin: 0 auto; display:flex; }
.box{ height: 100px; min-width: 100px; }
.one{ background: pink; }
.two{ background: lightgreen; }
.three{ background: skyblue; }

实际效果:

实际效果与波动合理布局相近,可是假如用波动完成的话必须写更多的编码,而flex1行就搞定了。

1. Justify Content

假如大家想让flex item垂直居中排序呢,大家能够给flex container提升1个css特性:justify-content,它操纵flex item在主轴方位(main axis,由flex-drection决策,默认设置为水平方位)上的对齐方法:

.flex-container{
  ...
  justify-content: center;
}

实际效果如图:

除此以外justify-content还能够设定为flex-start, flex-end, space-around, space-between, space-even等价,实际实际效果请自主试验。

2. Align Items

完成了flex方位的垂直居中后,竖直于主轴方位(cross axis)的垂直居中能够用align-items完成。

css:

.flex-container{
  max-width: 960px;
  margin: 0 auto;
  display:flex;
  justify-content: center;
  height: 200px;
  background-color: white;
  align-items: center;
}

实际效果:

应用flex处理了过去css竖直垂直居中完成繁杂的难题!相应的,align-items也有flex-start, flex-end等别的值。

3. Flex Direction

flex-direction决策了主轴方位即flex item排序方位,除默认设置的row方位以外,还能够纵向、反方向(row-reverse/column-reverse)排序flex item:

css:

.flex-container{
  ...
  
  flex-direction: column;
  align-items: center;
}

实际效果:

4. Flex Wrap

假如大家不想在对话框变窄的状况下缩小flex item,而是让超过界限的flex item换行显示信息那大家能够设定flex container的flex-wrap

.flex-container{
  max-width: 960px;
  margin: 0 auto;
  display:flex;
  flex-wrap: wrap;
}

.box{
  height: 100px;
  min-width: 300px;
  flex-grow: 1;
}

当大家缩小对话框的情况下,实际效果以下:

flex wrap也有1个值:wrap-reverse,设定该值后,被wrap的元素会排到别的元素上面:

不难看出,flex wrap1定水平上能够替代media query了。

5. Flex Row

最终,flex-directionflex-wrap能够合拼为1个特性flex-flow,例如:flex-flow: row-reverse wrap

Flex Item

1. Flex Grow

在上面全部的事例中,3个flex item只占有了flex container小一部分室内空间,假如想让flex item占满flex container大家必须给flex item设定flex-grow特性。说白了,grow代表着提高,用于操纵flex item的规格的屈伸。

将css改动为:

.box { 
    height: 100px; 
    min-width: 100px; 
    flex-grow:1; 
}

实际效果:

能够看到3个子元素均分了父元素的室内空间,由于此时它们的flex-grow全是1。假如仅有1个子元素设定了flex-grow呢?

css:

.box{ height: 100px; min-width: 100px; }
.one{ background: pink; flex-grow: 1; }

实际效果:

此时two和three的尺寸不会改变,而one占有了父元素剩下室内空间。

假如将one的flex-grow改成2,而two和three改成1,大家看看会产生甚么:

css:

.box{ height: 100px; min-width: 100px; flex-grow:1; }
.one{ background: pink; flex-grow: 2; }

实际效果:

能够看到one的宽度变为了two和three的两倍,因而flex item的规格和flex-grow的值成正比。

2. Flex Shrink

flex-grow相对性的是flex-shrinkflex-shrink用于操纵子元素规格超出flex container后,对子元素的缩小。请看示例:

改动box的宽度为flex container的1/3,one、two、three的flex-shrink各自为1,2,3:

.box{ height: 100px; width: 320px; }
.one{ background: pink; flex-shrink: 1; }
.two{ background: lightgreen; flex-shrink: 2; }
.three{ background: skyblue; flex-shrink: 3; }

当对话框一切正常规格时,实际效果以下:

当大家缩小对话框使其变得更窄后,实际效果以下:

当flex container宽度变成540px后,子元素都被不一样水平的缩小了。缩小后的one、two、three的宽度各自为250px、180px、110px,因此相比于原始宽度320px被缩小掉的宽度各自为70px、140px、210px,70 : 140 : 210 = 1 : 2 : 3,与flex shrink的值成反比。具体上缩小率和flex item的原始规格也是有关联,只但是当原始规格1样时它带来的危害被忽视了。

假定flex shrink为fs,flex item的原始规格为is,flex item被缩小的规格为ss,则正确的表述式为:

fs ∝ is/ss

3. Flex Basis

flex-basis用于设定flex item的原始宽/高。为何有width和height还必须再次加1个flex-basis呢?flex-basis和width/height有以下的差别:

  1. flex-basis只能用于flex-item,而width/height能够运用于别的种类的元素;
  2. flex-basis和flex-direction相关,当flex-direction为row的时,flex-basis设定的是宽度,当flex-direction为column时,flex-basis设定的是高宽比;
  3. 当flex item被肯定精准定位后(absolute position),flex-basis不起功效,而width/height能够;
  4. flex-basis能够用于flex的简写方式,如:flex: 1 0 200px;

大家看来1下flex-basis的功效,将css改动以下:

.box{
  height: 100px;
  flex-grow: 1;
}
.one{
  background: pink;
  flex-basis: 100px;
}
.two{
  background: lightgreen;
  flex-basis: 200px;
}
.three{
  background: skyblue;
  flex-basis: 300px;
}

3个flex item都在原先的原始宽度基本上提升了同样的宽度:

自然,这个事例假如换为应用width也是1样的实际效果,可是尽管实际效果1样但实际意义不1样,因此应用flex合理布局时還是应当尽可能遵循标准,选适合的人去干正确的事。

4. Order

根据order特性大家能够更改flex item的排序次序,比如:

html:

<section id="blocks">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</section>

css:

#blocks{
  display: flex;
  margin: 10px;
  justify-content: space-between;
}

#blocks div{
  flex: 0 0 100px;
  padding: 40px 0;
  text-align: center;
  background: #ccc;
}

默认设置排序次序是依照flex item在html中的出現次序:

当大家改动flex item的order值后,flex item会依照order值升序排序:

css:

.one{ order: 4; }
.two{ order: 3; }
.three{ order: 2; }
.four{ order: 1; }

实际效果:

结语

flex就先简易详细介绍到这里,flex很强劲也很简易,期待大伙儿用的高兴。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。