フレックスの使用法を包括的に理解する

1. flex を使用して div をレイアウトし、別の div 内で水平方向および垂直方向に中央に配置できます。 例: HTML コード:

CSS コード:

<div class="container">
    <div class="box">
 
    </div>
    </div>

ps:水平方向と垂直方向に中央揃えにすることができます

2. flex の属性

.container{
    width:600px;
    height:400px;
    border:1px solid blue;
    display: flex;
    justify-content:center;
    align-items:center;
    }
    .box{
    width:200px;
    height:100px;
    border:1px red solid;

アイテムに記述できる属性は 6 つあります:

•flex-direction

•flex-wrap

•flex-flow

•justify-content

• align -items

•align-content

アイテムに記述できる項目は 6 つあります:

•order// これはアイテムだけに与えられ、そのアイテムの順序を変更したい場合は、そのアイテムにこの属性を与えます。 item
•flex-grow
•flex-shrink
•flex-basis
•flex

•align-self

上記はすべて、flex の使い方を完全に理解するために編集者が提供した内容です。 PHP 中国語 Web サイトをサポートします~

詳細 フレックスの使用法と関連記事をより包括的に理解するには、PHP 中国語 Web サイトに注目してください。