iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
0
Modern Web

Ariel 的初學網頁設計筆記系列 第 3

Day3: Flex 排版小練習

https://ithelp.ithome.com.tw/upload/images/20200922/20127886jxAqjyhL5R.png

HTML:

CSS:

.flex {
display: flex;
height: 300px;
padding: 15px;
background-color: black;
flex-direction:row-reverse;
}

.item {
flex: 1;
background-color: #fff;
& + .item {
//margin: 15px;
}
}

.flex-2 {
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;
// 請修改這三個值試試看

background-color: #ccc;
}


上一篇
Day2: HTML之區塊元素與行內元素
下一篇
Day4:
系列文
Ariel 的初學網頁設計筆記4
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0

我要留言

立即登入留言