CSS--flexレイアウトをレスポンスページとして使用し、flexレイアウトの主な属性値

9305 ワード

従来のレイアウト方法は、display、position、floatプロパティ設定によって目的を達成するボックスモデルに基づいて実現されている.しかし、垂直中央のレイアウトはちょっと面倒…flexで応式レイアウトを鳴らすと、楽になります

flexレイアウト関連属性(親要素)1.display:

display:flex;       flex

2.flex-direction:

row（   ）：       ，     。
row-reverse：       ，     。
column：       ，     。
column-reverse：       ，     。

3.flex-wrap

nowrap(  )：        ，   ；
wrap(  )：        ，  ，      ；
wrap-reverse(  )：        ，  ，      ；

4.flex-flow

//flex-direction flex-wrap     ,    row nowrap
flex-flow:'flex-direction' 'flex-wrap'

5.justify-content

flex-start //   ，       （    ）    
flex-end //       （    ）    
center //         
space-between //       ，          。
space-around //           。  ，                   。

6.align-items

flex-start//        
flex-end//        
center//        
baseline//         
stretch//   ，            auto，          。

7.align-content

flex-start：         。
flex-end：         。
center：         。
space-between：        ，           。
space-around：            。  ，                   。
stretch（   ）：         。

flexレイアウト関連属性(サブ要素)1.flex-grow

//lex-grow           ，   0，         ，    

flex-grow: num //num    0，   0     ，         ，       flex-grow   ，

2.flex-shrink

//flex-shrink            ，   1，       ，      。

flex-shrink: num//num    1，   0    ，       flex-shrink   ，      ， 0

3.flex-basis

flex-basis:  | auto; /* default auto */

//flex-basis              ，         （main size）。         ，           。      auto，        。

//      width height      （  350px），          。

4.flex

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

//flex   flex-grow, flex-shrink   flex-basis   ，    0 1 auto。       。
//         ：auto (1 1 auto)   none (0 0 auto)。

//          ，             ，           。

5.order

order:num //   0，     

//         ，    ，

6.align-self

 align-self: auto | flex-start | flex-end | center | baseline | stretch;
//align-self                      ，   align-items  。    auto，        align-items  ，       ，    stretch。

//      6  ，  auto，    align-items      。

DEMO:

html構造部分


    <body>
        <header class="header">
            <div>  div>
            <div>  div>
            <div>  div>
            <div>  div>
        header>

        <header class="headerPer">
            <div>  div>
            <div>  div>
            <div>  div>
            <div>  div>
        header>
     body>

cssスタイルセクション:

    /*flex  */
   .header {
       display: flex;
       /*  Flex    ，    float、clear vertical-align     。*/
       flex-direction: row;
       background-color: #c5c5c5;
       width: 100%;
   }

   .header div {
       text-align: center;
       flex: 1;
   }
   /*     */
   .headerPer{
       background-color: #c5c5c5;
       width: 100%;
       float: left;
   }

   .headerPer div{
       float: left;
       width: 25%;
       text-align: center;
   }

javascriptでflash切り替え効果を模倣する

Webpack学習ノート-plugins