Front-end Notes
CSS Flex 一開始只要記住一點!
display:flex 這一定要宣告
HTML
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
</body>
CSS-Container 層
display: flex;
width:auto
height: 100px;
background-color: blue;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 15px;
margin-right: 15px;
/* padding 指的是 在container方框裡面, 向內縮小內容的px */
padding: 20px;
flex-direction: row ( 主軸排列方向 ) 放向 由左到右
CSS-item 層
item 子層樣式若要統一的話
width:150px ;
height:90px;
background: #00ffa2;
color: #033b56;
font-style: initial;
text-align: center;
font-size: 35px;
margin:10px auto;
margin-top: 10px;
margin-bottom: 15px;
margin-left: 10px;
margin-right:10px;
畫面顯示結果如下
