zoukankan      html  css  js  c++  java
  • 理解flexbox(一)

    flexbox是什么

         根据规范中的描述可知道,flexbox模块提供了一个有效的布局方式,即使不知道视窗大小或者未知元素情况之下都可以智能的,灵活的调用和分配元素和空间两者之间的关系。

    如何开始使用flexbox

         开始使用flexbox时,你所要做的第一件事情就是声明一个flex容器。比如:

    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>

          这是一个无序列表ul,里面有三个列表元素li。ul为父元素,li为子元素。要开始使用flexbox,必须先让父元素变成一个flex容器。可以在父元素中显示的设置display:flex或者display:inline-flex。这样就可以开始使用flexbox模块了。

         为以上html添加基本样式,如下:

    ul{
      display:flex; 
    }
    
    li{
      width:100px;
      height:100px;
      background:red;
      margin:10px;  
    }

    效果如下:

       一旦显式的设置了display属性的值为flex,无序列表ul就会自动变成flex容器,而其子元素(在本例中是指列表元素li)就变成了flex项目。

    关键字:

    • flex容器:父元素显式设置了display:flex
    • flex项目:flex容器内的子元素

    flex容器属性

    flex-direction  ||  flex-wrap || flex-flow || justify-content || align-items || align-content

    flex-direction

    控制flex项目沿着主轴(水平方向)的排列方向,有四个值

    row || column || row-reverse || column-reverse:分别是行,列,行的反方向,列的反方向,其中row是默认值。

    代码如下:

    <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
    </ul>
    ul{
         display:flex;  
         border:1px solid black;
         flex-direction: row; //或者 row-reverse || column || column-reverse
     }
    li{
        text-align: center;
        font-size:20px;
        width:100px;
        height:100px;
        background-color: red;
        margin: 10px;
     }

     四中效果如下:

    row:

    row-reverse:

    column:

    column-reverse:

     flex-wrap

     wrap|| nowrap|| wrap-reverse :其中nowrap是默认值。  

    代码如下:

    <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>10</li>
    </ul>
    ul{
          display:flex;  
          border:1px solid black;
        flex-wrap:wrap //或者 nowrap || wrap-reverse } li{ text-align: center; font-size:20px; width:100px; height:100px; background-color: red; margin: 10px; }

    效果如下:

    no-wrap:

    wrap:

    wrap-reverse:

     flex-flow

     flex-flow是flex-direction和flow-wrap两个属性的速记属性。

    值可以是:

    flex-flow: row wrap

     justify-content

    定义flex项目在水平方向上的对齐方式,其值:flex-start || flex-end ||center || space-between || space-around,其中flex-start是默认值。

    代码如下:

    ul{
         display:flex;  
         border:1px solid black;
         list-style: none;
         justify-content: space-between; //或者 flex-start || flex-end || center || space-between || space-around
       padding-left:0; } li{ text-align: center; font-size:20px; width:100px; height:100px; background-color: red; margin: 10px; }
    <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
    </ul>

    效果如下:

    flex-start:

    flex-end:

    center:

    space-between:

    space-around:

    align-items

    align-items属性类似于justify-content属性。只有理解了justify-content属性,才能更好地理解这个属性。属性值: flex-start|| flex-end || center|| stretch ||baseline,默认值是stretch。

    代码如下:

    ul{
         display:flex;  
         border:1px solid black;
         list-style: none;
         padding-left:0;
         align-items: stretch;
       height:100px; } li{ text-align: center; font-size:20px; width:100px; background-color: red; margin: 10px; }                     
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

     效果如下:

    stretch: 让所有flex项目的高度和flex容器高度一样。

    flex-start:让所有flex项目靠cross-Axis边缘(顶部对齐)

     

    flex-end: 让所有Flex项目靠Cross-Axis结束边缘(底部对齐)

    center:让所有flex项目在cross-Axis中间(居中对齐)

    basline: 让所有flex项目在cross-Axis上沿自己的极限对齐,为了显示出差别,文字大小做了调整,第一行文字底部对齐

    align-center

    还记得前面讨论的wrap属性吗?我们在Flex容器中添加了更多的Flex项目。让Flex容器中的Flex项目多行排列。

    align-center 属性用于多行的flex容器。它也是用来控制flex项目在flex容器里的排列方式,排列效果和align-items值一样,除了baseline属性值。

    值有:stretch || flex-start || flex-end || center ,其中stretch为默认值

    效果如下:

    stretch:

    flex-start:

    flex-end:

    center:

    总结,属性值为stretch时,可以不必为flex容器设置高度,它会自动充满容器

  • 相关阅读:
    压力测试衡量CPU的三个指标:CPU Utilization、Load Average和Context Switch Rate .
    [转](多实例)mysql-mmm集群
    mysql的MMM高可用方案
    压力测试工具
    memcached 的简介、安装、命令
    memcached 最大连接数及其内存大小的设置
    mysql优化
    mysql
    30道Linux面试题
    门户网站架构Nginx+Apache+MySQL+PHP+Memcached+Squid
  • 原文地址:https://www.cnblogs.com/yddlvo/p/6832154.html
Copyright © 2011-2022 走看看