flex_入門から放棄まで

13181 ワード
CSS
main axis
すいへいしゅじくcross axis
垂直交差軸main start
スピンドルの開始位置main end
スピンドルの終了位置cross start
クロス軸の開始位置cross end
クロス軸の終了位置main size
単一のアイテムが占有する主軸空間cross size
1つのアイテムが占める交差軸空間flex flex-direction
しゅじくほうこう
  • []行左=>右(デフォルト)
  • []row-reverse right=>左
  • []column上=>下
  • []column-reverse下=>上
    • flex-wrap
    改行(並べ替えられず、どのように改行するか)
  • []nowrap改行なし(デフォルト)
  • []変換行=>1行目は上
  • []wrap-reverse dumpquen=>最初の行は下の
    • です.flex-flow flex-direction状語従文:属性flex-wrap属性の略語形式で、デフォルト値はrow nowrapです.justify-content
    プロジェクトの主軸の位置合わせ
  • []flex-start左揃え(デフォルト)
  • []flex-end右揃え
  • []中居
  • []space-between両端対
  • []space-around平均分布、両側間隔
    • align-item
    アイテムの交差軸の位置合わせ
  • []flex-startトップ
  • []flex-end底面揃え
  • []センター中央揃え
  • []baseline 1行目のテキストベースラインに基づいて
    • に整列
  • [stretch]プロジェクトに高さが設定されていない場合は、画面全体の位置合わせ(デフォルト)
    • が満たされます.align-content
    交差軸ベースの複数行の位置合わせ(1行のみ機能しません)
  • [] flex-start
  • [] flex-end
  • [ ] center
  • [ ] space-between
  • [ ] space-around
  • [ ] stretch
    • flex order
    アイテムの並べ替え順序を定義します.数値が小さいほど、配置が前になり、デフォルトは0です.flex-grow
    プロジェクトの拡大率を定義します.デフォルトは0です.つまり、空き領域がある場合も拡大しません.(ゼロ以外の項目を設定すると、残りのスペースが比例して均等に分割されます)flex-shrink
    プロジェクトの縮小率を定義します.デフォルトは1です.つまり、スペースが不足している場合、プロジェクトは縮小されます.1つのプロジェクトのflex-shrink属性が0で、他のプロジェクトが1である場合、スペースが不足している場合、前者は縮小しません.flex-basis widthまたはheightの属性と同じ値(例えば350 px)に設定すると、プロジェクトは固定空間を占有する.flex flex-grow、flex-shrink、flex-basisの略語で、デフォルト値は0 1 autoです.次の2つのプロパティはオプションです.
    このプロパティには、auto(1 1 auto)とnone(0 0 auto)の2つのショートカットがあります.align-self align-itemsプロパティを上書きするには、単一のアイテムに他のアイテムとは異なる位置合わせを許可します.デフォルト値はautoで、親要素のalign-items属性を継承し、親要素がない場合はstretchと同じです.flex 、 
    HTML



<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>
        Flex Learning
    title>
    <link rel="stylesheet" href="./css/index.css">
head>
<body>
    
    <div class="box">
        
        <header id="header" class="">
            This is header of top!
        header>

        <article>
            <p>
                    , ie10          ..    , ie10          ..    , ie10          ..    , ie10          ..    , ie10          ..    , ie10          ..    , ie10          ..    , ie10          ..    , ie10          ..    , ie10          ..    , ie10          ..    , ie10          ..
            p>
        article>
        
        <nav>
              
        nav>
        
        <aside>
               
        aside>

        
        <footer>
            This is footer of bottom!
        footer>
    div>


    <script src="./js/index.js" type="text/javascript" charset="utf-8" async defer>script>
body>
html>
    CSS

html, body {
    margin: 0;
    padding: 0;
}

header, nav, article, aside, footer {
    box-sizing: border-box;
}

header {
    border: 1px solid red;
}

nav {
    border: 1px solid orange;
}

article {
    border: 1px solid #e5e5e5;
}

aside {
    border: 1px solid #000;
}

footer {
    border: 1px solid blue;
}

/*   flex  ，          */
.box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.box > * {
    padding: 10px;
    flex: 1 100%;
}

/*       nav aside      and       */
@media all and (min-width: 600px) {
    .box nav { flex: 1 auto; }
    .box aside { flex: 1 auto; }
}

/*       nav aside  article   */
@media all and (min-width: 1000px) {
    .box nav { order: 1; }
    .box article { order: 2; flex: 3 0%; }
    .box aside { order: 3; }
    .box footer { order: 4; }
}
    【pythonラーニング】辞書、集合、シーケンス
    JAvascript html 5フォーム検証の実装