display: flex;

<h1 class="title">News</h1>
<ul class="news-list">
  <li class="news-item">
    <div class="news-img"></div>
    <div class="news-text">
      <p class="news-title">冬季休業のお知らせ</p>
      <div class="readmore">
        <a class="readmore-link" href="#">Read more</a>
      </div>
    </div>
  </li>
  <li class="news-item">
    <div class="news-img"></div>
    <div class="news-text">
      <p class="news-title">新プランができました！</p>
      <div class="readmore">
        <a class="readmore-link" href="#">Read more</a>
      </div>
    </div>
  </li>
  <li class="news-item">
    <div class="news-img"></div>
    <div class="news-text">
      <p class="news-title">営業時間について</p>
      <div class="readmore">
        <a class="readmore-link" href="#">Read more</a>
      </div>
    </div>
  </li>
</ul>


*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 14px;
  box-sizing: border-box;
  color: #333333;
}

li {
  list-style: none;
}

.title {
  font-size: 24px;
  color: #495b65;
  text-align: center;
  position: relative;
  margin: 40px 0 40px 0;
}

.title::after {
  content: '';
  width: 70px;
  height: 3px;
  display: inline-block;
  background-color: #4273d3;
  position: absolute;
  bottom: -2px;
  left: calc(50% - 35px);
}

.news-list {
  width: 500px;
  margin: 0 auto;
  /* 問題1. 要素の横並び */
  /* この下に解答してください */
  display: flex;
  /* 問題2. 要素間の余白指定 */
  /* この下に解答してください */
  gap: 10px;
}

.news-item {
  width: 32%;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.news-img {
  background-color: #f5f5f5;
  width: 100%;
  height: 80px;
}

.news-text {
  padding: 4px;
}

.news-title {
  font-size: 4px;
  margin: 0;
  position: relative;
  margin-bottom: 4px;
}

.news-title::after {
  content: '';
  width: 88px;
  height: 1px;
  display: inline-block;
  background-color: #4273d3;
  position: absolute;
  bottom: -2px;
  left: 0;
}

.readmore {
  text-align: right;
}

.readmore-link {
  font-size: 2px;
}


*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 14px;
  box-sizing: border-box;
  color: #333333;
}

li {
  list-style: none;
}

.title {
  font-size: 24px;
  color: #495b65;
  text-align: center;
  position: relative;
  margin: 40px 0 40px 0;
}

.title::after {
  content: '';
  width: 70px;
  height: 3px;
  display: inline-block;
  background-color: #4273d3;
  position: absolute;
  bottom: -2px;
  left: calc(50% - 35px);
}

.news-list {
  width: 500px;
  margin: 0 auto;
  /* 問題1. 要素の横並び */
  /* この下に解答してください */

  /* 問題2. 要素間の余白指定 */
  /* この下に解答してください */
}

.news-item {
  width: 32%;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.news-img {
  background-color: #f5f5f5;
  width: 100%;
  height: 80px;
}

.news-text {
  padding: 4px;
}

.news-title {
  font-size: 4px;
  margin: 0;
  position: relative;
  margin-bottom: 4px;
}

.news-title::after {
  content: '';
  width: 88px;
  height: 1px;
  display: inline-block;
  background-color: #4273d3;
  position: absolute;
  bottom: -2px;
  left: 0;
}

.readmore {
  text-align: right;
}

.readmore-link {
  font-size: 2px;
}


要素内の余白指定

flex-wrap

要素の折り返し

flex-direction

要素の配置方向①(左右相互レイアウト)

align-items

margin

margin: 10px 20px 30px 40px;

上記のような場合、余白は上が$(1)px、下が$(2)px、左が$(3)px、右が$(4)pxとなる。

要素の垂直配置①（marginによる余白指定）

要素の垂直配置②（gapによる余白指定）

flex: 1; (ショートハンド)

要素の伸縮

演習問題（聖杯レイアウト）

Flexboxを使用したさまざまなレイアウトパターンを実践的に学びます。
レスポンシブデザインにも対応した現代的なWebページ制作を目指します。

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

Web制作コース

【中級編💼】レイアウトとレスポンシブ対応を学ぼう

「Flexboxでさまざまなレイアウトを作ってみよう」レッスンの総復習クイズです。

Flexboxでさまざまなレイアウトを作ってみようの総復習クイズ

「さまざまなレイアウトをFlexboxで作ってみよう」レッスンの総復習クイズです。