2. 科技
  3. 【CSS】Flex布局

【CSS】Flex布局

it2022-05-05  347

Flex

这是一篇阮一峰Flex博客的阅读笔记 原文在此

1. 设置flex

任何一个容器 display: flex;行内元素 display: inline-flex;设置flex后，float，clear，vertical-align将失效

2. 概念

flex container 容器 容器成员称为 flex item 项目水平轴 main axis （main start + main end）垂直轴 cross axis （cross start + cross end）单个项目占据的主轴空间称为 main size

3. 容器属性

flex-direction 主轴方向row | row-reverse | column | column-reverse flex-wrap 一条线排不下，如何换行nowrap | wrap | wrap-reversewrap-reverse反向换行，向上换行 flex-flow 是direction和wrap的简写，默认值是row wrap justify-content —> main 定义项目在主轴上的对齐方式flex-start | flex-end | center | space-between | space-around align-items —> cross 定义项目在交叉轴上的对齐方式flex-start | flex-end | center | baseline | stretch align-content 定义了多根轴线的对齐方式flex-start | flex-end | center | space-between | space-around | stretch

4. 项目属性

order 定义项目的排列顺序越小越前，默认0 flex-grow 定义项目的放大比例，如果空间剩余，则充斥。默认00表示不因空间变化而变化，其余正数是各项目之间的比例 flex-shrink 定义项目的缩小比例，如果空间不足，则缩小。默认1 flex-basis 项目占据的主轴空间main size，默认 auto flex grow， shrink， basis的简写默认0 1 auto align-self 单个项目不同于整体容器的对齐规则align-self 会覆盖容器的 align-items默认auto，表示继承父元素的 align-items

5. 骰子布局（九宫格布局）

<div class="box"> <div class="item"></div> </div> <style> .box{ display: flex; justify-content: center; align-items: space-between; width: 150px; height: 150px; border: 1px red solid; } .item{ width: 48px; height: 48px; border: 1px red solid; } </style>

单项目 9个位置都可以通过justify-content和align-items设置

/* 首行左对齐 */ .box{ display: flex; } /* 改变项目对齐方式 */ .box{ display: flex; justify-content: center | flex-start | flex-end; } /* 交叉轴，垂直方向 */ .box{ display: flex; align-items: center; } /* 垂直水平居中 */ .box{ display: flex; justify-content: center; align-items: center; }

双项目

/* 两端对齐 */ .box{ display: flex; justify-content: space-between; } /* 垂直两端对齐，借助改变主轴方向 */ .box{ display: flex; flex-direction: column; justify-content: space-between; } /* 允许单个项目独立于其他项目的不一样的对齐方式 */ .box{ display: flex; /* 这里默认flex-start */ } .item:nth-child(2) { align-self: center; }

三项目

/* 利用align-slef，各自独立的对齐方式 */ .box{ display: flex; } .item:nth-child(2){ align-self: center; } .item:nth-child(3){ align-self: flex-end; }

四项目

/* 默认自动压缩，wrap换行 */ .box{ display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: space-between; } <div class="box"> <div class="column"> <span class="item"></span> <span class="item"></span> </div> <div class="column"> <span class="item"></span> <span class="item"></span> </div> </div> <style> .box { display: flex; flex-wrap: wrap; align-content: space-between; } .column{ /* basis表示单个项目占据主轴多少；auto表示本来大小；100%表示充满主轴 */ flex-basis: 100%; display: flex; justify-content: space-between; } </style>

6. 栅格布局

等比布局（平均布局）

<div class="grid"> <div class="cell"></div> </div> <style> .grid{ display: flex; } .cell{ /* 等比例填充 */ flex: 1; } </style>

百分比布局

<div class="grid"> <div class="grid-cell u-1of4"></div> <div class="grid-cell"></div> <div class="grid-cell u-1of2"></div> </div> <style> .grid { display: flex; } .grid-cell { border: 1px red solid; height: 50px; flex: 1; } .grid-cell.u-1of4{ flex: 0 0 25%; } .grid-cell.u-1of3{ flex: 0 0 33.33%; } .grid-cell.u-1of2{ flex: 0 0 50%; } .grid-cell.u-full{ flex: 0 0 100%; } </style>

圣杯布局（holy grail layout）

<body class="HolyGrail"> <style> *{ border: 1px solid red; } .HolyGrail{ display: flex; min-height: 100vh; flex-direction: column; } .HolyGrail-body{ flex: 1; display: flex; } .HolyGrail-content{ flex: 1; } .HolyGrail-nav, .HolyGrail-ads{ flex: 0 0 20%; } .HolyGrail-nav{ /* 可以调整项目顺序 */ order: -1; } @media(max-width: 768px){ .HolyGrail-body{ flex-direction: column; flex: 1; } .HolyGrail-content, .HolyGrail-ads, .HolyGrail-nav{ flex: auto; } } </style> <header>Header</header> <div class="HolyGrail-body"> <main class="HolyGrail-content"></main> <nav class="HolyGrail-nav"></nav> <aside class="HolyGrail-ads"></aside> </div> <footer>Footer</footer> </body>

7. 输入框布局

在输入框前后需要缀上提示信息和图标按钮等

<div class="InputAddOn"> <span class="InputAddOn-item">请输入姓名</span> <input class="InputAddOn-field" /> <button class="InputAddOn-item">确认提交</button> </div> <style> .InputAddOn{ display: flex; } .InputAddOn-item{ /* 不会因为空间不足而缩小 */ flex: 0 0 auto; } .InputAddOn-field{ flex: 1; } </style>

8. 悬挂式布局

<div class="Media"> <img class="Media-figure" src="https://www.wangbase.com/blogimg/asset/201903/bg2019032401.jpg" width="40" height="40" /> <p class="Media-body">有时，主栏的左侧或右侧，需要添加一个图片栏. 有时，主栏的左侧或右侧，需要添加一个图片栏. 有时，主栏的左侧或右侧，需要添加一个图片栏. 有时，主栏的左侧或右侧，需要添加一个图片栏.</p> </div> <style> .Media{ display: flex; align-items: flex-start; } .Media-figure{ margin-right: 1em; flex: 0 0 40px; } .Medai-body{ flex: 1; } p{ margin: 0; } </style>

9. 固定底栏

页面内容撑不满屏幕，底栏会抬高

<div class="Site"> <header>Header</header> <main class="main"></main> <footer>Footer</footer> </div> <style> *{ border: 1px solid red; } .Site{ display: flex; flex-direction: column; /* 充满屏幕 */ min-height: 100vh; } .main{ /* 填充剩余空间 */ flex: 1; } </style>

10. 流布局

每行项目数目固定，自动分行

<body> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <style> *{ border: 1px solid red; } .container{ display: flex; flex-wrap: wrap; align-content: flex-start; min-height: 100vh; width: 100px; } .item{ width: 23px; height: 23px; } </style> </body>

专利

最新回复(0)