CSS align-content 灞炴

CSS 鍙傝冩墜鍐 CSS 鍙傝冩墜鍐


瀹炰緥

瀵归綈寮规х洅鐨 <div> 鍏冪礌鐨勫悇椤癸細

div
{
    display: flex;
    flex-flow: row wrap;
    align-content:space-around;
}

灏濊瘯涓涓 禄

娴忚鍣ㄦ敮鎸

琛ㄦ牸涓殑鏁板瓧琛ㄧず鏀寔璇ュ睘鎬х殑绗竴涓祻瑙堝櫒鐨勭増鏈彿銆

银河湖北快三计划—官方网址22270.COM绱ц窡鍦 -webkit-, -ms- 鎴 -moz- 鍚庣殑鏁板瓧涓烘敮鎸佽鍓嶇紑灞炴х殑绗竴涓増鏈

灞炴
align-content 21.0 11.0 28.0 9.0
7.0 -webkit-
12.1

瀹氫箟鍜岀敤娉

align-content 灞炴у湪寮规у鍣ㄥ唴鐨勫悇椤规病鏈夊崰鐢ㄤ氦鍙夎酱涓婃墍鏈夊彲鐢ㄧ殑绌洪棿鏃跺榻愬鍣ㄥ唴鐨勫悇椤癸紙鍨傜洿锛夈

鎻愮ず锛浣跨敤 justify-content 灞炴у榻愪富杞翠笂鐨勫悇椤癸紙姘村钩锛夈

娉ㄦ剰锛银河湖北快三计划—官方网址22270.COM瀹瑰櫒鍐呭繀椤绘湁澶氳鐨勯」鐩紝璇ュ睘鎬ф墠鑳芥覆鏌撳嚭鏁堟灉銆

榛樿鍊硷細 stretch
缁ф壙锛
鍙姩鐢诲寲锛 鍚︺傝鍙傞槄 鍙姩鐢诲寲锛坅nimatable锛
鐗堟湰锛 CSS3
JavaScript 璇硶锛 object.style.alignContent="center" 灏濊瘯涓涓


CSS 璇硶

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

榛樿鍊

鎻忚堪 娴嬭瘯
stretch

银河湖北快三计划—官方网址22270.COM榛樿鍊笺傚厓绱犺鎷変几浠ラ傚簲瀹瑰櫒銆

鍚勮灏嗕細浼稿睍浠ュ崰鐢ㄥ墿浣欑殑绌洪棿銆傚鏋滃墿浣欑殑绌洪棿鏄礋鏁帮紝璇ュ肩瓑鏁堜簬'flex-start'銆傚湪鍏跺畠鎯呭喌涓嬶紝鍓╀綑绌洪棿琚墍鏈夎骞冲垎锛屼互鎵╁ぇ瀹冧滑鐨勪晶杞村昂瀵搞

娴嬭瘯 禄
center

鍏冪礌浣嶄簬瀹瑰櫒鐨勪腑蹇冦

鍚勮鍚戝脊鎬х洅瀹瑰櫒鐨勪腑闂翠綅缃爢鍙犮傚悇琛屼袱涓ょ揣闈犱綇鍚屾椂鍦ㄥ脊鎬х洅瀹瑰櫒涓眳涓榻愶紝淇濇寔寮规х洅瀹瑰櫒鐨勪晶杞磋捣濮嬪唴瀹硅竟鐣屽拰绗竴琛屼箣闂寸殑璺濈涓庤瀹瑰櫒鐨勪晶杞寸粨鏉熷唴瀹硅竟鐣屼笌绗渶鍚庝竴琛屼箣闂寸殑璺濈鐩哥瓑銆傦紙濡傛灉鍓╀笅鐨勭┖闂存槸璐熸暟锛屽垯鍚勮浼氬悜涓や釜鏂瑰悜婧㈠嚭鐨勭浉绛夎窛绂汇傦級

娴嬭瘯 禄
flex-start

鍏冪礌浣嶄簬瀹瑰櫒鐨勫紑澶淬

琛屽悜寮规х洅瀹瑰櫒鐨勮捣濮嬩綅缃爢鍙犮傚脊鎬х洅瀹瑰櫒涓涓琛岀殑渚ц酱璧峰杈圭晫绱ч潬浣忚寮规х洅瀹瑰櫒鐨勪晶杞磋捣濮嬭竟鐣岋紝涔嬪悗鐨勬瘡涓琛岄兘绱ч潬浣忓墠闈竴琛屻

娴嬭瘯 禄
flex-end

鍏冪礌浣嶄簬瀹瑰櫒鐨勭粨灏俱

鍚勮鍚戝脊鎬х洅瀹瑰櫒鐨勭粨鏉熶綅缃爢鍙犮傚脊鎬х洅瀹瑰櫒涓渶鍚庝竴琛岀殑渚ц酱璧风粨鏉熺晫绱ч潬浣忚寮规х洅瀹瑰櫒鐨勪晶杞寸粨鏉熻竟鐣岋紝涔嬪悗鐨勬瘡涓琛岄兘绱ч潬浣忓墠闈竴琛屻

娴嬭瘯 禄
space-between

鍏冪礌浣嶄簬鍚勮涔嬮棿鐣欐湁绌虹櫧鐨勫鍣ㄥ唴銆

鍚勮鍦ㄥ脊鎬х洅瀹瑰櫒涓钩鍧囧垎甯冦银河湖北快三计划—官方网址22270.COM濡傛灉鍓╀綑鐨勭┖闂存槸璐熸暟鎴栧脊鎬х洅瀹瑰櫒涓彧鏈変竴琛岋紝璇ュ肩瓑鏁堜簬'flex-start'銆傚湪鍏跺畠鎯呭喌涓嬶紝绗竴琛岀殑渚ц酱璧峰杈圭晫绱ч潬浣忓脊鎬х洅瀹瑰櫒鐨勪晶杞磋捣濮嬪唴瀹硅竟鐣岋紝鏈鍚庝竴琛岀殑渚ц酱缁撴潫杈圭晫绱ч潬浣忓脊鎬х洅瀹瑰櫒鐨勪晶杞寸粨鏉熷唴瀹硅竟鐣岋紝鍓╀綑鐨勮鍒欐寜涓瀹氭柟寮忓湪寮规х洅绐楀彛涓帓鍒楋紝浠ヤ繚鎸佷袱涓や箣闂寸殑绌洪棿鐩哥瓑銆

娴嬭瘯 禄
space-around

银河湖北快三计划—官方网址22270.COM鍏冪礌浣嶄簬鍚勮涔嬪墠銆佷箣闂淬佷箣鍚庨兘鐣欐湁绌虹櫧鐨勫鍣ㄥ唴銆

鍚勮鍦ㄥ脊鎬х洅瀹瑰櫒涓钩鍧囧垎甯冿紝涓ょ淇濈暀瀛愬厓绱犱笌瀛愬厓绱犱箣闂撮棿璺濆ぇ灏忕殑涓鍗娿傚鏋滃墿浣欑殑绌洪棿鏄礋鏁版垨寮规х洅瀹瑰櫒涓彧鏈変竴琛岋紝璇ュ肩瓑鏁堜簬'center'銆银河湖北快三计划—官方网址22270.COM鍦ㄥ叾瀹冩儏鍐典笅锛屽悇琛屼細鎸変竴瀹氭柟寮忓湪寮规х洅瀹瑰櫒涓帓鍒楋紝浠ヤ繚鎸佷袱涓や箣闂寸殑绌洪棿鐩哥瓑锛屽悓鏃剁涓琛屽墠闈㈠強鏈鍚庝竴琛屽悗闈㈢殑绌洪棿鏄叾浠栫┖闂寸殑涓鍗娿

娴嬭瘯 禄
initial 璁剧疆璇ュ睘鎬т负瀹冪殑榛樿鍊笺傝鍙傞槄 initial 娴嬭瘯 禄
inherit 浠庣埗鍏冪礌缁ф壙璇ュ睘鎬с傝鍙傞槄 inherit


鐩稿叧鏂囩珷

CSS 鍙傝冩墜鍐岋細align-items 灞炴

CSS 鍙傝冩墜鍐岋細align-self 灞炴

CSS 鍙傝冩墜鍐岋細justify-content 灞炴


CSS 鍙傝冩墜鍐 CSS 鍙傝冩墜鍐