• HOME
  • Web制作
  • display:flexを指定してwidthが効かない場合

display:flexを指定してwidthが効かない場合

 
 

display:flexを指定してwidthが効かない場合

たとえばこんな構造で
<div class=”pc_col”>
<dl class=”hyou_li”>
<dt class=”hyou_li_ttl ft_gray3″>今日の天気</dt><dd class=”hyou_li_con”>晴れ</dd>
</dl>
<dl class=”hyou_li”>
<dt class=”hyou_li_ttl ft_gray3″>昨日の天気</dt><dd class=”hyou_li_con”>曇り/dd>
</dl>
<dl class=”hyou_li”>
<dt class=”hyou_li_ttl ft_gray3″>一昨日の天気</dt><dd class=”hyou_li_con”>雷</dd>
</dl>
</div>

dlのhyou_liにwidthかけても効かなくて全部横並びになってしまった場合、display:flexをかけている.pc_colにflex-wrap:wrap をかけると効くことがあるよ。

flex-wrap:wrapは次の行に右回り?で改行されるという指定。

この記事もおすすめ