Flexbox で中央寄せにする方法 flex-container に「 justyify-content 」プロパティを使用します。 各プロパティの値は下記の通りで、例えば中央寄せにしたい場合は、center を指定します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <title>Flexboxテスト</title> <meta charset="UTF-8"> </head> <style> .container{ display: flex; width: 100%; background-color: #aaa; /*並び順*/ /* flex-start:左寄せ(デフォルト) flex-end:右寄せ center: 中央寄せ space-between:残り余白の均等割り space-around:左右余白 + 均等割り *
![CSS の Flexbox で、要素の左右中央寄せ、均等割り、右寄せ( justyify-content )の方法|レンタルサーバーナレッジ](https://cdn-ak-scissors.b.st-hatena.com/image/square/00e9003d4765d8dd458700c2153fc4448dee7a1c/height=288;version=1;width=512/https%3A%2F%2Fknowledge.cpi.ad.jp%2F.assets%2Fthumbnail%2Fhtml5-480wi-1200wi.png)