同じ高さをそろえたい～CSS版～
2024年10月25日
10月の終わりが近づく中…
今朝はちょうどいい気温になったり寒くなったりの日々がやっと来た感じです。
街のお散歩に出かけると、金木犀のような甘い香りがたまに漂ってきてます。
朝と夜はだんだん涼しくなってきてるころ、日中は暑かったり涼しかったりの波が激しいんですが…
体調はしっかりと整えてくださいね。
話を取り戻して…
同じ高さをそろえたい～CSS版～
Webページをデザインをしていく中で、一つのブロックの高さがバラバラになって、「height: 200px;」を設定したりとかしていませんか？
一つのブロックの中に自動的に高さを揃えたいなぁという気持ちがありました。
昨日のブログにご紹介した「javascript」の技法を説明しました。
しかし、別のCSSで「Flexbox」という技法があること知りませんでした。
「Flexbox」の使い方の技法を説明しますね。
<ul>
<li>高さの要素を揃える。高さの要素を揃える。高さの要素を揃える。高さの要素を揃える。高さの要素を揃える。高さの要素を揃える。</li>
<li>高さの要素を揃える。高さの要素を揃える。高さの要素を揃える。高さの要素を揃える。</li>
<li>高さの要素を揃える。高さの要素を揃える。高さの要素を揃える。高さの要素を揃える。高さの要素を揃える。</li>
<li>高さの要素を揃える。高さの要素を揃える。高さの要素を揃える。高さの要素を揃える。高さの要素を揃える。高さの要素を揃える。高さの要素を揃える。高さの要素を揃える。</li>
</ul>次にCSSの記述方法を説明しますね。
ul{
display: flex;
margin: 0 auto;
padding: 0;
width: 80%;
}
ul li{
border: 1px solid #CCC;
display: flex;/* 子要素にFlexをかける */
flex-direction: column; /* 直下の要素を縦積みをさせる */
flex-grow: 1;/* 比率を自動的に指定をしてくれる */
margin:0 10px;
padding: 10px;
width: 20%;
}
/これで無事にCSSを使って高さをきれいに揃えることができます。
お陰様ですっきりしました。
ではまた！
- Leonardo
- 転職したほうがいい？～Part.2～ 2024年12月19日
- 転職したほうがいい？ 2024年12月18日
- オリジナルリセットスタイル構築中 2024年12月17日
- 今日は家族のクリスマスプレゼント～Part.3～ 2024年12月16日
- 今日は家族のクリスマスプレゼント～Part.2～ 2024年12月15日