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?

【初心者でもわかる】flexboxで縮めたくない要素には「flex-shrink」を使え

どうも7noteです。flexboxのよく使う小技。

flexboxは便利で使い勝手がいいのですが、たまに横の要素が長くなった影響で、widthを指定していても無理に縮小されてしまうことがあります。

mihon.png

これの対策方法として、「flex-shrinkを指定する」方法があります。

対策

index.html
<div class="box">
  <h1>ポイント</h1>
  <p>テキストが長くなっても「flex-shrink: 0;」を指定していれば大丈夫!</p>
</div>
.box {
  width: 400px;
  border: 1px solid #000;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
h1 {
  color: #fff;
  font-size: 16px;
  background: #f00;
  margin-right: 10px;
  flex-shrink: 0;      /* 幅を変更したくない要素に指定 */
}

結果
ok.png

まとめ

想定よりも文字が長くなってしまった時に、よく見たらデザインが崩れていることがあります。
「widthを指定しているのになんで??」となりやすいですが、落ち着いて変更させたくない要素にflex-shrink: 0;を指定しましょう。

flex-shrinkはflexboxを指定している時、縮小する割合を指定できるものです。
詳しくはこちら

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

7note
フロントエンジニア4年目。3〜4人ほど後輩の育成経験もあり。HTML・CSS初心者向けにわかりやすい記事を意識して書いていきます!目標毎日更新。自社開発を中心にWEBサイト制作を行っています。約40件のHP制作経験あり。Wordpressで独自テーマの開発などもちょこちょこやってます。
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