码迷,mamicode.com
首页 > 其他好文 > 详细

C3弹性盒子及弹性布局

时间:2018-10-20 16:22:38      阅读:931      评论:0      收藏:0      [点我收藏+]

标签:实现   检索   auto   row   元素   模型   tween   填充   适应   

1、主题思想:

  • 元素可以改变大小,以适应可用空间,当可用空间变大,弹性盒将伸展大小以填充可用空间,当弹性盒子超出可用空间时将自动缩小。总之,弹性盒是可以让你的布局根据浏览器的大小变化进行自动伸缩;
  • flexbox是一个可以让你告别浮动,完美实现垂直水平居中的新特性。

2、给父元素添加的属性:

  • display:flex —— 设置某个块元素为弹性盒;:
  • flex-direction —— 顺序指定了弹性子元素在父容器中的位置(主轴排列方向);
    • row:默认在一行排列;
    • row-reverse:反转横向排列,右对齐,从后往前排,最后一项排在最前面;
    • column:纵向排列;
    • column-reverse:反转纵向排列,从下往上排,最后一项排在最上面;
  • justify-content —— 把弹性项沿着弹性容器的主轴线对齐(主轴对齐方式):
    • flex-start:默认,顶端对齐;
    • flex-end:末端对齐;
    • center:居中对齐;
    • space-between:两端对齐,中间自动分配;
    • space-around:自动分配距离;
  • align-items —— 侧轴对齐方式:
    • flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界;
    • flex-end:弹性盒子元素的侧轴(纵轴)起始位置紧靠住该行的侧轴结束边界;
    • center:弹性盒子元素在该行的侧轴(纵轴)还是那个居中放置,如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度;
    • baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与flex-start等效,其它情况下,该值将参与基线对齐;
  • flex-wrap —— 该属性控制flex容器是单行或者是多行,同时横轴的方向决定了新的堆叠的方向:
    • nowrap:flex容器为单行,该情况下flex子项可能会溢出容器;
    • wrap:flex容器为多行,该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行;
    • wrap-reverse:反转wrap排行;
  • align-content —— 行与行之间对齐方式,当伸缩容器的侧轴还有多余空间时,本属性可以用来调准【伸缩行】在伸缩容器里的对齐方式,这与调准伸缩项目在主轴上对齐方式的justify-content属性类似,请注意本属性在只有一行的伸缩容器上没有效果;
    • flex-start:没有行间距;
    • flex-end:底对齐没有行间距;
    • center:居中对齐没有行间距;
    • space-between:自动分配距离;

3、给子元素添加的属性:

  • align-self —— 属性规定灵活容器内被选中项目的对齐方式,可重写灵活容器的align-items属性:
    • auto:默认位置,如果没有父元素,则计算值为stretch;
    • flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界;
    • flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界;
    • center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度;
    • baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与flex-start等效,其它情况下,该值将参与基线对齐;
    • stretch:如果指定侧轴大小的属性值为auto,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照min/max-width/height属性的限制;

4、其它:

  • order:number排序优先级,数字越大越往后排,默认为0,支持负数;

5、flex:复合属性,设置或检索弹性盒模型对象的子元素如何分配空间

  • 如果缩写为flex:1,则其计算值为[ 1  1  auto];
  • 如果缩写为flex:auto,则其计算值为[1  1 auto];
  • 如果缩写为flex:auto,则其计算值为[0  0  auto];
  • 如果缩写为flex: 0 auto  或者flex:initial,则其计算值为[0  1  auto],即flex初始值

C3弹性盒子及弹性布局

标签:实现   检索   auto   row   元素   模型   tween   填充   适应   

原文地址:https://www.cnblogs.com/cq-0715/p/9821208.html

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!