经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 软件/图像 » Flex » 查看文章
flex甯冨眬涓娇鐢╢lex-wrap瀹炵幇鎹㈣鐨勯」鐩疄璺礯CSS甯冨眬瀹炰緥_CSS
来源:jb51  时间:2022/6/20 8:41:07  对本文有异议

鏈€杩戝仛涓」鐩?鍏朵腑鏈変釜鏍峰紡鏄?strong>鎹㈣甯冨眬,浣滀负鏍峰紡娓f福鐨勬垜涓€寮€濮嬩笉浼?鍙兘鏌ヨ祫鏂?鐒跺悗鎽嗗钩浜嗗畠.浠婂ぉ寰楃┖浜?绠€瑕佽褰曚竴涓?鏂逛究鍚庨潰灏忎紮浼村竷灞€浣跨敤.

鍙傝€冭祫鏂?a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap" target="_blank"> flex-wrap

寮€濮嬫牱寮?/h3>

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

<div class="planWrap">
  <div class="content planItem">1</div>
  <div class="content planItem">2</div>
  <div class="content planItem">3</div>
  <div class="content planItem">4</div>
  <div class="content planItem">5</div>
  <div class="content planItem">6</div>
</div>

<style>
.content {
  background: red;
  line-height:50px;
  height: 50px;
  width: 50px;
  text-align: center;
  margin-top:5px
}

.planWrap {
    width: 160px;
    height: 200px;
    border: 1px solid;
    display:flex;
}

</style>

flex-wrap 瀹炵幇鎹㈣

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

<style>
.planWrap {
    width: 160px;
    height: 200px;
    border: 1px solid;
    display:flex;
    flex-wrap: wrap;
}
</style>

璇存槑:

1.flex-wrap 灞炴€ф寚瀹?flex 鍏冪礌鍗曡鏄剧ず杩樻槸澶氳鏄剧ず,璇ュ睘鎬ф帴鍙椾互涓嬪彇鍊?

  • nowrap: 鍏冪礌閮芥斁鍦ㄤ竴琛?涔熸槸榛樿灞炴€у€?
  • wrap:鍏冪礌鏀惧埌澶氳;
  • wrap-reverse: 鍜?wrap 鐨勮涓轰竴鏍凤紝浣嗘槸 cross-start 鍜?cross-end 浜掓崲銆?濡備笅鍥惧睍绀烘洿鐩磋)

2.涓婇潰鏈夋彁鍙妛rap-reverse,灞曠ず涓€涓媤rap-reverse鐨勬牱寮?/p>

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

<style>
.planWrap {
    width: 160px;
    height: 200px;
    border: 1px solid;
    display:flex;
    flex-wrap: wrap-reverse;
}
</style>

鍨傜洿鎹㈣ flex-flow

绠€鍐欏睘鎬?flex-flow

涓婇潰鐨勯兘鏄鍒嗗竷,鐜板湪鎴戞兂瑕佸瀭鐩村垎甯冧笖鎹㈣

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

<style>
.planWrap {
    width: 160px;
    height: 200px;
    border: 1px solid;
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
}
</style>

閫氳繃flex-direction鎸囧畾鎺掑垪鏂瑰悜,flex-wrap鍒跺畾鏄惁鎹㈣;涓嶈繃杩欐牱鍐欏灏戞湁鐐归夯鐑?鍙互浣跨敤flex-flow鏉ヨ繘琛岀畝鍐?/p>

// 绗竴涓寚瀹氱殑鍊间负 flex-direction 锛岀浜屼釜鎸囧畾鐨勫€间负 flex-wrap.
flex-flow: flex-direction flex-wrap
<style>
.planWrap {
    width: 160px;
    height: 200px;
    border: 1px solid;
    display:flex;
    flex-flow:column wrap;
}
</style>

3涓竴琛屽彉涓?涓竴琛?/h3>

Flex灞炴€х殑绠€鍐?/a>

鐜板湪鎴戜笉浠呭笇鏈涜兘鎹㈣,鎴戣繕甯屾湜鑳?涓竴琛?/p>

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

.planWrap {
    width: 160px;
    height: 200px;
    border: 1px solid;
    display:flex;
    flex-flow:row wrap;
}

.planItem {
    flex: 50%;
}

杩欓噷闈娇鐢ㄤ簡flex灞炴€?flex鍙互鎸囧畾鍏冪礌鍗犳嵁鐨勭櫨鍒嗘瘮鎴栬€呭浐瀹氬搴?鍏蜂綋鍙互瑙佷笂闈㈡枃妗?灏变笉璇︾粏璇存槑浜?

nth-child 鎸囧畾涓€浜涘厓绱犵壒瀹氬睘鎬?/h3>

鐜板湪鎴戝笇鏈涗袱涓猟iv鐩存帴闂磋窛10px,浣嗘槸鍚庨潰涓€涓厓绱犳病鏈夐棿璺?/p>

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

.planItem {
    flex: 40%;
    margin-right: 10px;
}

.planItem:nth-child(2n) {
    margin-right: 0px;
} 

棣栧厛鎸囧畾浜?code>margin-right,鎵€浠ユ垜灏?code>flex鐧惧垎姣旇皟灏?鐒跺悗浣跨敤浜?code>nth-child淇敼鍋舵暟浣嶇殑鍏冪礌.

瀹屼簨鐨勭粨鏉熻 ^ _ ^

鍒版杩欑瘒鍏充簬flex甯冨眬涓娇鐢╢lex-wrap瀹炵幇鎹㈣鐨勯」鐩疄璺电殑鏂囩珷灏变粙缁嶅埌杩欎簡,鏇村鐩稿叧flex-wrap瀹炵幇鎹㈣鍐呭璇锋悳绱㈣剼鏈箣瀹朵互鍓嶇殑鏂囩珷鎴栫户缁祻瑙堜笅闈㈢殑鐩稿叧鏂囩珷锛屽笇鏈涘ぇ瀹朵互鍚庡澶氭敮鎸佽剼鏈箣瀹讹紒

 友情链接: NPS