簡易テキスト列挙

目的

• メニューを均等横並びにして、簡単なテキストを列挙したい。
• 罫線なし。

実行結果

解説

• 罫線が無いので分かりづらいかもしれませんが、2つのメニューが均等横並びになっていて、テキストが左詰めになっています。
• 2つのメニューにしましたが、3つや4つでも自動で可変されます。

HTML

<div class="layout_1_2">
	<div>キャベツ<br />レタス<br />白菜<br />ほうれん草<br />小松菜<br />人参<br />大根<br />ジャガイモ<br />玉ねぎ<br />サツマイモ<br />トマト<br />きゅうり<br />ナス<br />ピーマン<br />カボチャ<br />ブロッコリー<br />アスパラガス<br />トウモロコシ<br />ごぼう<br />レンコン</div>
	<div>リンゴ<br />バナナ<br />ミカン<br />イチゴ<br />ブドウ<br />モモ<br />メロン<br />スイカ<br />梨<br />柿<br />キウイ<br />パイナップル</div>
</div>

• メニューを増やす場合は <div>〜</div> をコピー＆ペーストしてください。減らす場合は削除してください。いずれの場合も自動で可変されます。

CSS

.layout_1_2 {
	display: flex;
	width: 94%;
	margin-right: auto;
	margin-left: auto;
}

.layout_1_2 > div {
	font-size: 14px;
	text-align: left;
	flex: 1;
}

• テキストを中央揃えや右詰めにする場合は、10行目のtext-align: left;のleftをcenterやrightに変えてください。