zoukankan      html  css  js  c++  java
  • 12.13的学习内容

    今天学的有点迷糊,不过还是能懂。自学是种态度,坚持就会成功。

    接下来进入自己的学习内容:

    关于弹性布局的笔记:

    3.flex-flow,是flex-direction和flex-wrap的简写形式

    1
    flex-flow:<flex-direction> || <flex-wrap>;

    flex-direction顺序指定了弹性子元素在父容器中的位置。

    语法:row横向从左到右排列(左对齐),默认的排列方式。

       row-reverse:反转横向排列(右对齐),从后往前排,最后一项排在最前面。

       column:纵向排列。

      column-reverse:反转纵向排列,从后往前排,最后一项在最上面。

    justify-content(内容对齐):属性应用在弹性容器上,把弹性项的main-start外边距线被放置在该行的marn-start边线,

    而后续弹性项依次平齐摆放。

      flex-start:弹性项目向尾行紧挨着填充。第一个弹性项的main-end外边距线被放置在该行的main-end边线,而后续弹性项依次平齐摆放。

      center:弹性项目居中紧挨着填充。(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)。

      space-between:弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项,则该值等同于flex-start。

      否则,第一个弹性项的外边距和行的main-start边线对齐,而最后一个弹性项的外边距和行的main-end边线对齐,然后剩余的弹性项分布在该行上,相邻项目的间隔相等。

      space-around:弹性项目平均分布在该行上,两边留有一般的间隔空间。如果剩余空间为负或者只有一个弹性项,则该值等同于center。否则,弹性项目沿着该行分布,且彼此间隔相等,同时首尾两边和弹性容器之间留有一半的间隔(1/2)。

    align-items属性

     align-items设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

    语法

     flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。

     flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。

     center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。

     baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与flex-start等效。其他情况下,该值将参与基线对齐。

     stretch:如果指定侧轴大小的属性值为“auto”,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照“min/max-width/height”属性的限制。

    flex-wrap:弹性盒子的换行属性。

      语法:nowrap默认,弹性容器为单行。 该情况下弹性子项会溢出容器。

         wrap 弹性容器为多行,该情况下弹性子项溢出的部分会进行换行,子项目内部会发生断行。

         wrap-reverse-反转wrap排列。

    align-conten:用来修改flex-wrap属性的行为。类似于align-items,但它不是设置弹性子元素的对齐,而是设置各个行的对齐。

      语法:stretch 默认,各行将会伸展以占用剩余的空间。

         flex-start 各行向弹性盒容器的起始位置堆叠。

         flex-end 各行向弹性容器的结束位置堆叠。

         center各行向弹性盒容器的中间位置堆叠。

         space-between:各行在弹性盒容器中平均分布。

         space-around:各行在弹性容器中平均分布,两端保留子元素与子元素之间的间距大小的一半。

    弹性子元素属性:排序

      语法:order

      <integer>:用整数值来定义排列顺序,数值小的排在前面。可以为负值。

        order属性设置弹性容器内弹性子元素的属性

    align-self属性用于设置弹性元素自身在侧轴(纵轴)方向上的对齐方式。

      auto:如果align-self的值为“auto”,则其计算值为元素的父元素的“align-items”值,如果其没有父元素 ,则计算值为“stretch”。

      flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。

      flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。

      center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度。)

      baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与flex-start等效,其他情况下,该值将参与基线对齐。

      stretch:如果指定侧轴大小的属性值为auto,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照“min/max-width/height”属性的限制。

    flex:属性用于指定弹性子元素如何分配空间。

      auto:计算值为11auto;

      initial:计算值为01auto;

      none:计算值为00auto;

      inherit:从父元素继承;

      flex-grow:定义弹性盒子的扩展比率

      flex-shrink:定义弹性盒子的收缩比率

      flex-basis:定义弹性盒子元素的默认基准值

      

  • 相关阅读:
    POJ 1401 Factorial
    POJ 2407 Relatives(欧拉函数)
    POJ 1730 Perfect Pth Powers(唯一分解定理)
    POJ 2262 Goldbach's Conjecture(Eratosthenes筛法)
    POJ 2551 Ones
    POJ 1163 The Triangle
    POJ 3356 AGTC
    POJ 2192 Zipper
    POJ 1080 Human Gene Functions
    POJ 1159 Palindrome(最长公共子序列)
  • 原文地址:https://www.cnblogs.com/l8l8/p/8033093.html
Copyright © 2011-2022 走看看