Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

HTML/CSS 簡単に横並びにできるflexboxについて

『コンテンツや文字を横並びにする』のに
flexboxが非常に便利なので、簡単に解説していきます。

<div class="container">
    <div class="left">
      <p>左です</p>
    </div>
    <div class="right">
      <p>右です</p> 
    </div>
</div>

<style>
.left{
    color: white;
    background-color: lightcoral;
    width: 100px;
    height: 100px;
    text-align: center;
}

.right{
    color: white;
    background-color: lightblue;
    width: 100px;
    height: 100px;
    text-align: center;
}
</style>

これを更新すると

スクリーンショット 2020-11-10 15.32.03.png

こうなるので、親要素の.containerにdisplay: flex;を追加します。

<style>
    .container{
      display: flex;
    }
.left{
    color: white;
    background-color: lightcoral;
    width: 100px;
    height: 100px;
    text-align: center;
}

.right{
    color: white;
    background-color: lightblue;
    width: 100px;
    height: 100px;
    text-align: center;
}
  </style>

すると

スクリーンショット 2020-11-10 15.36.04.png

横並びになりました。
二つのボックスを離して配置したいときは、親要素にjustify-content: space-around;もしくはjustify-content: space-between;を追加します。

スクリーンショット 2020-11-10 15.39.05.png

ボックスがいい感じに配置されましたね。space-betweenを適応するとボックスが両端に配置されますので、ご自身の手で検証してみてください。

また、レスポンシブ対応させる時にボックスを左右入れ替えたい時は親要素にflex-direction: row-reverse;を追加すると、左右が入れ替わりますし、
flex-direction: column;を追加するとまた縦並びに戻ります。

.container{
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-around;
    }

スクリーンショット 2020-11-10 15.39.05.png

.container{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

スクリーンショット 2020-11-10 15.51.13.png

簡単な解説は以上になります。他にも色々機能があるのでご自身で試してみてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away