跟著KP用21天征服Responsive Layout-W2-優化flexbox的html結構

在學習了flexbox的起手式之後，讓我們來檢視與優化html結構吧。

常見的html結構

<section class="three-col"> 	
<div class="container">  <!--用來設置layout--> 	
	<div class="row">    <!--單純用來設置flex-->   		
		<div class="col">col1</div> 			
		<div class="col">col2</div> 		
		<div class="col">col3</div> 	
		</div> 
	</div> 
</section>

要設計RWD的網頁，我們常會用上面的結構設置HTML。使用多層的div，各自有各自的用處。

• container 是用來讓內容置中，兩旁有間距。
• row 則是用來當flex-container

flex-container的命名慣例

我們在例子中，將其命名成了row。這是參考Bootstrap的命名慣例，形象化描述了container是一行的特質。

我們也可以將container命名為d-flex 或是flex,這個命名則是描述了其作為flex-container的事實。也許你會問，哪幹嘛直接叫flex-container? 這其實我也不知道,我猜是不要跟container太撞名 或是很單純的是不用太長的名字。

flex-container可以命名為

• row
• d-flex
• flex

簡化html結構

上面的兩個div ,container和row在結構上可以合併成同個div，但是用不同的class來分別作同的css設定。

<section class="three-col"> 	

	<div class="container row">    <!--同時設置layout與當flex container-->   		
		<div class="col">col1</div> 			
		<div class="col">col2</div> 		
		<div class="col">col3</div> 	
		</div> 
	
</section>

.container{
 width:80%;
 margin: 0 auto;
}
.row{
display:flex;
}

這麼一來,雖然這裡兩個class都是設在同一個div。但是之後可以靈活地設定在不同的html元素上。

<section > 	

	<div class="container">  
<article>
<h2>heading</h2>
<p>lorem ddtf  eegdss </p>
</artice>
<div class="row">​
		<div class="col">col1</div> 			
		<div class="col">col2</div> 		
		<div class="col">col3</div> 	
		</div> 
</div>
</section>

結論

藉由簡化html結構、活用class name與使用命名慣例，能夠協助我們寫出更易懂的code。