コンテナ内の要素を配置する方法について説明いたします。
コンテナ内のアイテムを配置するには、レイアウトタブのアイテムの中で設定します。
目次
商品(アイテム)の使い方
レイアウトタブ内の、商品(アイテム)はこちら。
※ Elementorの日本語版は『商品』となっていますが、『アイテム』と呼ばせて頂きます。
![](https://learnerchi.com/wp-content/uploads/2024/06/Items-3.png)
方向 (Direction)
フレックスボックスコンテナ内の要素を配置するには、アイテム内にある方向(Direction)を使用して、含まれる要素が表示される方向を決定します。
Row : アイテムは水平に配置されます
![](https://learnerchi.com/wp-content/uploads/2024/06/Direction-1-1024x296.png)
Column : アイテムは垂直に配置されます
![](https://learnerchi.com/wp-content/uploads/2024/06/Direction-2-1024x296.png)
Row Reversed : アイテムは水平に配置されますが、逆の順序です
![](https://learnerchi.com/wp-content/uploads/2024/06/Direction-3-1024x296.png)
Column Reversed : アイテムは垂直に配置されますが、逆の順序です
![](https://learnerchi.com/wp-content/uploads/2024/06/Direction-4-1024x294.png)
コンテンツの配置(Justify Content)
コンテナ内のアイテムを配置する方法を決定します。
Start : アイテムはコンテナの開始位置に配置されます
![](https://learnerchi.com/wp-content/uploads/2024/06/Justify-1-1024x258.png)
Center : アイテムはコンテナの中央に配置されます
![](https://learnerchi.com/wp-content/uploads/2024/06/Justify-2-1024x259.png)
End : アイテムはコンテナの終了位置に配置されます
![](https://learnerchi.com/wp-content/uploads/2024/06/Justify-3-1024x255.png)
Space Between : アイテムはコンテナ全体に均等に配置されます
![](https://learnerchi.com/wp-content/uploads/2024/06/justify-4-1024x249.png)
Space Around : アイテム間に均等なスペースがあります
![](https://learnerchi.com/wp-content/uploads/2024/06/justify-5-1024x258.png)
Space Evenly : アイテムとコンテナの端に均等なスペースがあります
![](https://learnerchi.com/wp-content/uploads/2024/06/Justify-6-1024x243.png)
アイテムの配置 (Align Items)
コンテナ内のアイテムが中心軸にどのように配置されるかを制御します。
方向フィールドで選択した方向に応じて、アイテムがコンテナ内の残りのスペースを分配するのにも役立ちます。
![](https://learnerchi.com/wp-content/uploads/2024/06/Align-1-1024x234.png)
![](https://learnerchi.com/wp-content/uploads/2024/06/Align-2-1024x229.png)
![](https://learnerchi.com/wp-content/uploads/2024/06/Align-3-1024x232.png)
要素の間隔 (Gaps)
ウィジェットや他のコンテナ間の間隔を決めます。
![](https://learnerchi.com/wp-content/uploads/2024/06/gaps-1024x114.png)
折り返し
コンテナ内のアイテムを1行にするか、次の行に改行するかを決めます。
![](https://learnerchi.com/wp-content/uploads/2024/06/rap-1-1024x231.png)
![](https://learnerchi.com/wp-content/uploads/2024/06/rap-2-1024x264.png)
参考 : https://elementor.com/help/adjusting-the-contained-elements/
コメント