CSS寮规€у竷灞€锛團lex锛夋槸CSS3涓殑涓€绉嶆柊鐨勫竷灞€鏂瑰紡锛屽畠鑳藉甯姪鎴戜滑鏇村姞鐏垫椿鍦板竷灞€鍏冪礌銆傚湪Flex寮规€у竷灞€涓紝鍏冪礌鐨勫竷灞€浠呬緷璧栦簬鐖跺鍣ㄧ殑璁剧疆锛岃€屼笉鍐嶉渶瑕佸鏉傜殑鐩稿鎴栫粷瀵瑰畾浣嶃€傛湰鏂囧皢璇︾粏浠嬬粛Flex甯冨眬涓殑鎹㈣涓庢孩鍑哄鐞嗘柟娉曪紝骞剁粨鍚堝叿浣撶殑浠ｇ爜绀轰緥锛屽府鍔╄鑰呮洿濂藉湴鐞嗚В涓庤繍鐢ㄣ€?/p>
涓€銆佹崲琛屽鐞嗘柟娉?/h2>
鍦‵lex甯冨眬涓紝褰撳瓙鍏冪礌鐨勬€诲搴﹁秴杩囩埗瀹瑰櫒鐨勫搴︽椂锛屾湁鏃舵垜浠渶瑕佽繘琛屾崲琛屽鐞嗐€備互涓嬫槸涓€浜涘父瑙佺殑鎹㈣澶勭悊鏂规硶锛?/p>
- .container {
- display: flex;
- flex-wrap: wrap;
- }
2锛宖lex-direction灞炴€э細flex-direction灞炴€т篃鍙互鐢ㄤ簬鎺у埗鎹㈣銆傚畠鏈夊洓涓彲鑳界殑鍊硷細row銆乺ow-reverse銆乧olumn銆乧olumn-reverse銆傞粯璁ゅ€间负row锛岃〃绀哄湪鍚屼竴琛屽唴鎺掑垪瀛愬厓绱犮€傚鏋滃皢鍏惰缃负column锛屽垯浼氬湪鍨傜洿鏂瑰悜涓婃帓鍒楀瓙鍏冪礌銆傚綋瀛愬厓绱犳€诲搴﹁秴杩囩埗瀹瑰櫒瀹藉害鏃讹紝浼氳嚜鍔ㄦ崲琛屻€備緥濡傦細
- .container {
- display: flex;
- flex-direction: column;
- }
3锛屼娇鐢╢lex-basis灞炴€э細flex-basis灞炴€х敤浜庤缃厓绱犵殑鍒濆闀垮害銆傚彲浠ラ€氳繃璁剧疆涓嶅悓鐨刦lex-basis鍊兼潵鏀瑰彉瀛愬厓绱犵殑瀹藉害锛屼粠鑰屽疄鐜版崲琛屾晥鏋溿€備緥濡傦細
- .container {
- display: flex;
- }
- .item {
- flex-basis: 200px;
- }
浜屻€佹孩鍑哄鐞嗘柟娉?/h2>
褰撳瓙鍏冪礌鐨勯暱搴﹁秴杩囩埗瀹瑰櫒鐨勯暱搴︽椂锛屾湁鏃舵垜浠渶瑕佸婧㈠嚭鍐呭杩涜澶勭悊銆備互涓嬫槸涓€浜涘父瑙佺殑婧㈠嚭澶勭悊鏂规硶锛?/p>
- .container {
- display: flex;
- overflow: hidden;
- }
2锛屼娇鐢╢lex灞炴€э細flex灞炴€ф槸flex-grow銆乫lex-shrink鍜宖lex-basis鐨勭缉鍐欍€傚叾涓紝flex-basis鐢ㄤ簬璁剧疆鍏冪礌鐨勫垵濮嬮暱搴︺€傚彲浠ラ€氳繃璁剧疆涓嶅悓鐨刦lex-basis鍊兼潵鏀瑰彉瀛愬厓绱犵殑瀹藉害锛屼粠鑰屽疄鐜版孩鍑哄唴瀹圭殑闅愯棌鏁堟灉銆備緥濡傦細
- .container {
- display: flex;
- }
- .item {
- flex: 0 0 200px;
- overflow: hidden;
- }
3锛屼娇鐢╰ext-overflow灞炴€э細text-overflow灞炴€х敤浜庤缃孩鍑哄唴瀹圭殑鏄剧ず鏂瑰紡銆傚畠鍙涓€琛屾枃鏈唴瀹硅捣浣滅敤銆傚彲浠ュ皢鍏惰缃负ellipsis锛屽疄鐜版孩鍑哄唴瀹圭殑鐪佺暐鍙锋樉绀烘晥鏋溿€備緥濡傦細
- .container {
- display: flex;
- }
- .item {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
涓夈€佺ず渚嬩唬鐮佽В鏋?/h2>
涓嬮潰鏄竴涓ず渚嬩唬鐮佽В鏋愶紝灞曠ず浜咶lex甯冨眬涓崲琛屼笌婧㈠嚭澶勭悊鏂规硶鐨勫叿浣撳簲鐢細
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- .container {
- display: flex;
- flex-wrap: wrap;
- width: 400px;
- border: 1px solid #ccc;
- }
- .item {
- flex-basis: 200px;
- height: 100px;
- border: 1px solid #ccc;
- margin: 10px;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="item">Item 1</div>
- <div class="item">Item 2</div>
- <div class="item">Item 3</div>
- <div class="item">Item 4</div>
- <div class="item">Item 5</div>
- <div class="item">Item 6</div>
- <div class="item">Item 7</div>
- <div class="item">Item 8</div>
- </div>
- </body>
- </html>
鍦ㄤ笂杩颁唬鐮佷腑锛屽鍣ㄥ厓绱犵殑瀹藉害涓?00px锛岃缃簡flex-wrap灞炴€т负wrap锛屼互鍙婂瓙鍏冪礌鐨刦lex-basis灞炴€т负200px銆傚綋瀹瑰櫒瀹藉害涓嶅瀹圭撼鎵€鏈夊瓙鍏冪礌鏃讹紝浼氳嚜鍔ㄦ崲琛屽苟璋冩暣瀛愬厓绱犵殑瀹藉害銆?/p>
鍚屾椂锛岃缃簡瀛愬厓绱犵殑楂樺害涓?00px锛岄€氳繃璁剧疆杈规鍜屽杈硅窛绛夋牱寮忥紝浣垮緱甯冨眬鏇村姞鐩磋銆傝鑰呭彲浠ユ牴鎹嚜宸辩殑闇€姹備慨鏀逛唬鐮侊紝杩涗竴姝ヤ簡瑙lex甯冨眬涓殑鎹㈣涓庢孩鍑哄鐞嗘柟娉曘€?/p>
鎬荤粨
浠ヤ笂璇︾粏浠嬬粛浜咶lex甯冨眬涓殑鎹㈣涓庢孩鍑哄鐞嗘柟娉曪紝骞剁粨鍚堝叿浣撶殑浠ｇ爜绀轰緥杩涜浜嗚В鏋愩€傚湪瀹為檯寮€鍙戜腑锛岀伒娲昏繍鐢ㄨ繖浜涙柟娉曪紝鍙互甯姪鎴戜滑鏇村ソ鍦板鐞嗗厓绱犵殑甯冨眬涓庢孩鍑哄唴瀹癸紝鎻愬崌鐢ㄦ埛浣撻獙銆傝鑰呭彲浠ユ牴鎹嚜宸辩殑闇€姹傝繘琛岃繘涓€姝ョ殑瀹炶返涓庤繍鐢ㄣ€?/p>
鍒版杩欑瘒鍏充簬Css Flex寮规€у竷灞€涓殑鎹㈣涓庢孩鍑哄鐞嗙殑鏂囩珷灏变粙缁嶅埌杩欎簡,鏇村鐩稿叧Css寮规€у竷灞€鎹㈣涓庢孩鍑哄唴瀹硅鎼滅储鑴氭湰涔嬪浠ュ墠鐨勬枃绔犳垨缁х画娴忚涓嬮潰鐨勭浉鍏虫枃绔狅紝甯屾湜澶у浠ュ悗澶氬鏀寔鑴氭湰涔嬪锛?/p>
经验首页