flex

21137 ワード
CSS テキストリンク

flex

<!doctype>
<html>
<head>
    <style>
        .container{
            background-color: powderblue;
            height:200px;
            display:flex;
            flex-direction:row;
        }
        .item{
            background-color: tomato;
            color:white;
            border:1px solid white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>
flexを適用するには、コンテナとそのアイテムが必要です.
デフォルトで使用できるプロパティはcontainerのflex-directionです.
block elemの特徴を利用して、row時、height 100%
columnではwidth 100%の場合が見られます.
/* The direction text is laid out in a line */
flex-direction: row;

/* Like <row>, but reversed */
flex-direction: row-reverse;

/* The direction in which lines of text are stacked */
flex-direction: column;

/* Like <column>, but reversed */
flex-direction: column-reverse;
<!doctype>
<html>
<head>
    <style>
        .container{
            background-color: powderblue;
            height:200px;
            display:flex;
            flex-direction:row;
        }
        .item{
            background-color: tomato;
            color:white;
            border:1px solid white;         
        }
        .item:nth-child(1){
            flex-basis: 150px;
            flex-shrink: 1;
        }
        .item:nth-child(2){
            flex-basis: 150px;
            flex-shrink: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>
flex-basic定義(Item用)
The flex-basis CSS property sets the initial main size of a flex item. Itは、ボックスサイズが別途設定されていない限り、コンテンツボックスのサイズを設定する.
flex-directionがrowの場合、デフォルトでwidthを設定します.
columnの場合、デフォルトでheightが設定されます.
flex-growの定義(Item用)
itemは容器の空白をどのくらい等分するかを決定します.

Description


This property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).
The main size is either width or height of the item which is dependent on the flex-direction value.
The remaining space is the size of the flex container minus the size of all flex items' sizes together. If all sibling items have the same flex grow factor, then all items will receive the same share of remaining space, otherwise it is distributed according to the ratio defined by the different flex grow factors.
flex-sriftの定義(Item用)
The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink .
flex-shrink: 0;
containerがitemが占める空間より小さい場合、propertyが設定されているitemはcontent領域を減少させません.
コンテナのflex-wrapの定義
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
Alignn-はコンテナ定義項目
The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis . In Grid Layout, it controls the alignment of items on the Block Axis within their grid area .
デフォルト値はStretchです(これらのアイテムをContainerにパッケージします).
Container内部のItemソートを表します.(行と列に基づいています.)
/* Positional alignment */
/* align-items does not take left and right values */
align-items: center; /* Pack items around the center */
align-items: start; /* Pack items from the start */
align-items: end; /* Pack items from the end */
align-items: flex-start; /* Pack flex items from the start */
align-items: flex-end; /* Pack flex items from the end */
align-sself(Item用)
Alignn-itemsとして指定されている場合、特定の項目のみ例外的に整列することができます.
align-self: center; /* Put the item around the center */
align-self: start; /* Put the item at the start */
align-self: end; /* Put the item at the end */
align-self: self-start; /* Align the item flush at the start */
align-self: self-end; /* Align the item flush at the end */
align-self: flex-start; /* Put the flex item at the start */
align-self: flex-end; /* Put the flex item at the end */
Justify-コンテンツの定義(Container用)
The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
Container flex-directionでソートします.
/* Positional alignment */
justify-content: center;     /* Pack items around the center */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end;   /* Pack flex items from the end */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */
Align-定義内容
space-binter=>同じ行に存在するitemを組み合わせて一定の空間を与えて配置する.
Order Property(Item用)
Itemの順序を適用できます.
order:1,order:2はこのように適用されます.
デフォルトでは、cssではflexと%がwindow resizeに関連付けられています.
スレッド同期方法1(ReentrantLock)
Expoアプリケーションで独立したKakaoTalk支払を実行する必要がない(Expo-intent-launcher付き)