zoukankan      html  css  js  c++  java
  • flexbox 伸缩布局盒

    Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计。

    Flexbox 由 伸缩容器 和 伸缩项目 组成。通过设置元素的 display 属性为    flex  或  inline-flex     可以得到一个伸缩容器

                设置为flex的容器被渲染为一个块级元素,而设置为inline-flex的容器则渲染为一个行内元素。

    例如:此处将 类名为   flex-container   的元素设置为伸缩容器

    .flex-container {
    display-webkit-flex;
    displayflex;
    }

    伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。

    简单地说,Flexbox 定义了伸缩容器内伸缩项目该如何布局。

    Flex Lines 伸缩行       

    伸缩项目沿着伸缩容器内的一个 伸缩行 定位。通常每个伸缩容器只有一个伸缩行。  默认伸缩行从左往右

    例子:

     1 <div class="flex-container">
     2 <div class="flex-item">flex item 1</div>
     3 <div class="flex-item">flex item 2</div>
     4 </div>
     5 
     6 样式:
     7 
     8 .flex-container {
     9 display: -webkit-flex;
    10 display: flex;
    11 width: 300px;
    12 height: 240px;
    13 background-color: Silver;
    14 }
    15 
    16 .flex-item {
    17 background-color: DeepSkyBlue;
    18 width: 100px;
    19 height: 100px;
    20 margin: 5px;
    21 }
    View Code

    效果图:

    再加

    <div class="flex-item">flex item 3</div>
    <div class="flex-item">flex item 4</div>

    伸缩项目的宽度超过了 伸缩容器的宽度,伸缩容器的宽度不会改变,伸缩项目的宽度减小



     1 <div class="flex-container">
     2 <div class="flex-item">flex item 1</div>
     3 <div class="flex-item">flex item 2</div>
     4 </div>
     5 
     6 
     7 CSS样式
     8 .flex-container {
     9    direction: rtl;
    10     display: -webkit-flex;
    11     display: flex;
    12     width: 300px;
    13     height: 240px;
    14     background-color: Silver;
    15     
    16 }
    17 
    18 .flex-item {
    19     background-color: DeepSkyBlue;
    20     width: 100px;
    21     height: 100px;
    22     margin: 5px;
    23 }
    View Code

    效果:

    伸缩行从右往左,文字也从右往左

    为了描述抽象的书写模式,Flexbox 使用 主轴 和 侧轴的概念。伸缩行跟随主轴。侧轴则垂直于主轴。

    flex-direction 伸缩流的方向

    默认值  row   

    再次提醒,默认是从左至右,从上到下。其他的值如下:

    • row-reverse: 主轴起点和主轴终点交换。如果书写模式是从左至右,伸缩项目则是从左往右显示。
    • column: 主轴和侧轴交换。如果书写系统是垂直的,那么伸缩项目也是垂直显示的。
    • column-reverse: 和 column 一样,但是方向相反。

    justify-content 主轴对齐

    用于调整主轴上伸缩项目的位置。可能的值为:

    • flex-start (默认)
    • flex-end
    • center
    • space-between
    • space-around

     align-items 侧轴对齐

    调整伸缩项目在侧轴上的定位方式。可能的值有:

    • flex-start (默认)
    • flex-end
    • center
    • baseline
    • stretch

    flex-wrap 伸缩行换行

    为伸缩容器创建多个伸缩行。这个属性接受以下值:

    • nowrap (默认)
    • wrap
    • wrap-reverse

    align-content 堆栈伸缩行

    它对齐的是伸缩行,它接受的值:

    • stretch (默认)
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around

    flex-flow 伸缩方向与换行    是flex-directionflex-wrap的缩写。

  • 相关阅读:
    【转】依赖注入那些事儿
    【转】Visual Studio單元測試小應用-測執行時間
    【转】 代码设计敏捷开发三部曲
    【转】 c#中两个DateTimePicker,一个时间设置为0:0:0,另一个设置为23:59:59
    【转】 C#获取当前程序运行路径的方法集合
    CSVHelper读出乱码 解决方案
    CvsHelper 使用指南
    【转】 C# ListView实例:文件图标显示
    【转】C# winform 加载网页 模拟键盘输入自动接入访问网络
    基于MHA的MySQL高可用
  • 原文地址:https://www.cnblogs.com/MdpHappyForEver/p/5311623.html
Copyright © 2011-2022 走看看