flex灵活布局
显示： 柔性
打开 flex 布局模式。将一个元素设置为 flex 容器，其直接子元素将成为 flex 项。
.container { display: flex;}
弯曲方向
定义主轴方向（项目排列方向）。可选值：
行（默认）：水平，从左到右。row-reverse：水平方向，从右到左。列：垂直，从上到下。column-reverse：垂直，从下到上。
.container { flex-direction: row | row-reverse | column | column-reverse;}
柔性包裹
控制当一行空间不足时是否换行。可选值：
nowrap（默认）：不换行，物品可能会溢出容器。wrap：换行，项目排列成多行。wrap-reverse：换行，第一行在底部，后续行向上排列。
.container { flex-wrap: nowrap | wrap | wrap-reverse;}
证明内容合理
定义主轴上的对齐方式。可选值：
flex-start（默认）：项目与起点对齐。flex-end：项目与终点对齐。center：项目居中对齐。space- between：均匀分布项目之间的间距，第一个和最后一个项目分别附着在容器的两端。space-around：项目之间均匀分布间距，项目两侧的间距相等。space-evenly：均匀分布item之间的间距，item与容器边缘的间距以及item之间的间距相等。
.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;}
对齐项目
定义交叉轴上的对齐方式。可选值：
立即学习“前端免费学习笔记（深入）”；
拉伸（默认）：项目拉伸以填充整个横轴。flex-start：项目与横轴的起点对齐。flex-end：项目与横轴的末端对齐。center：项目以横轴为中心。基线：项目按基线对齐。
.container { align-items: stretch | flex-start | flex-end | center | baseline;}
对齐内容
仅适用于多行flex布局（flex-wrap:wrap），定义多行项目在横轴上的对齐方式。可选值：
拉伸（默认）：每行拉伸以填充整个交叉轴。flex-start：每行与交叉轴的起点对齐。flex-end：每行与交叉轴的末端对齐。center：每行与交叉轴的中心对齐。space- between：均匀分布每行之间的空间，第一行和最后一行分别附着在容器的两端space-around：均匀分布每行之间的空间，并且行两侧的空间相等。
.container { align-content: stretch | flex-start | flex-end | center | space-between | space-around;}
命令
定义项目的顺序。值越小，阶数越高。默认值为 0。
.item { order: ;}
弹性增长
定义项目的放大比例。默认值为0，表示不放大。如果所有项目都设置为非零值，则剩余空间按比例分配。
.item { flex-grow: ; /* default is 0 */}
弯曲收缩
定义项目的收缩率。默认为 1，表示可以缩小。如果所有项目都设置为非零值，它们会按比例缩小以防止溢出容器。
.item { flex-shrink: ; /* defaults to 1 */}
弹性基础
定义分配剩余空间之前项目的初始大小。接受长度、百分比、自动（默认）或内容值。
.item { flex-basis: | | auto | content;}
弯曲
flex-grow、flex-shrink 和 flex-basis 的简写。默认为 0 1 自动。
.item { flex: none | [ ? || ];}
自我对齐
覆盖容器的align-items属性以定义单个项目在横轴上的对齐方式。可选值与align-items相同。
Win8 Metro风格后台管理模板
Win8 Metro风格后台管理模板是一套基于Bootstrap框架开发的，响应式布局模板，全套模板，DIV+CSS架构，兼容PC端和移动端，29美元买的专业后台模版。有后台登录页面，后台模板页面有仪表盘、按钮和图标、形式、UI元素和部件、表、媒体管理器、活版印刷、图表、信息、日历、404错误页等系统功能菜单页面，共22个模板页面。
198 查看详情 
.item {align-self: auto | stretch | flex-start | flex-end | center | baseline;}
网格 网格布局
显示：网格；
打开网格布局模式。将一个元素设置为 grid 容器，其直接子元素将成为 grid 项（单元格）。
.container {display: grid;}
网格模板列和网格模板行
定义网格的列轨道和行轨道的大小。接受长度、百分比、fr（分数单位，表示网格空间的分数）或auto值。您还可以使用repeat()函数创建重复轨道，并使用minmax()函数定义轨道的最小和最大尺寸。
.container { grid-template-columns: ... | repeat(, ) | auto-fill | auto-fit; grid-template-rows: ... | repeat(, ) | auto-fill | auto-fit;}/* example */.container { grid-template-columns: 1fr 2fr 1fr; /* three columns, width ratio is 1:2:1 */ grid-template-rows: 50px auto 1fr; /* three rows, the first row is 50px, the second row is adaptive height, and the third row is the remaining space */}
网格模板区域
通过命名项目并用字符串描述网格结构来定义网格布局的区域。项目名称使用 .代表一个空白单元格。
.container { grid-template-areas: "header header header" "nav main sidebar" "footer footer footer";}/* the corresponding items need to set the grid-area attribute */.item1 { grid-area: header;}.item2 { grid-area: nav;}.item3 { grid-area: main;}.item4 { grid-area: sidebar;}.item5 { grid-area: footer;}
网格间隙或网格列间隙和网格行间隙
设置网格中项目之间的间隙。接受长度或百分比值。
.container { grid-gap: ; /* shorthand form, set both row and column gaps */ grid-row-gap: | ; /* set row gaps separately */ grid-column-gap: | ; /* set column gaps separately */}/* example */.container { grid-gap: 10px 20px; /* 10px row gap, 20px column gap */}
网格自动列和网格自动行
定义自动填充网格时新添加的行或列的轨道大小。当项目超出定义的网格范围时生效。
.container {grid-auto-columns: ... | repeat(, );grid-auto-rows: ... | repeat(, );}/* example */.container { grid-auto-rows: minmax(100px, auto); /* the minimum height of the newly added row is 100px, and the maximum height is adaptive to the content */}
网格自动流
控制网格项目如何自动填充和排列。可选值：
行（默认）：按行填充。列：按列填写。dense：当row或column与dense一起使用时，如果网格中有间隙，新的项目将尝试填充这些间隙，而不是仅仅将它们添加到网格的末尾。
.container { grid-auto-flow: row | column | row dense | column dense;}
网格列开始、网格列结束、网格行开始和网格行结束
手动指定网格中项目的开始和结束位置。
.item { grid-column-start: | | auto; grid-column-end: | | span | auto; grid-row-start: | | auto; grid-row-end: | | span | auto;}/* example */.item { grid-column: 1 / 3; /* equivalent to grid-column-start: 1; grid-column-end: 3;, occupying the first to third columns */ grid-row: 2 / span 2; /* equivalent to grid-row-start: 2; grid-row-end: span 2;, starting from the second row, spanning two rows */}
网格区域
同时设置 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写属性，或引用 grid-template-areas 中定义的区域名称。
.item { grid-area: | / / / ;}/* example */.item { grid-area: header; /* referencing the area name defined in grid-template-areas */}
css grid 与 flexbox 结合
在某些情况下，我们可以结合 css grid 和 flexbox 的优点来创建更复杂的响应式布局。
/* Container style */.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Adaptive column width */ grid-gap: 10px; padding: 10px;}/* Sub-element style */.container > div { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f0f0f0; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); border-radius: 5px;}/* Responsive layout */@media screen and (max-width: 768px) { .container { grid-template-columns: 1fr; /* Single column layout */ } .container > div { height: 100%; /* Keep child element height */ }}
首先，css grid 用于创建具有自适应列宽的网格布局。每个网格项（子元素）都使用内部的 flexbox 来垂直居中内容。当屏幕宽度小于 768px 时，媒体查询切换为单列布局以适应移动设备。
flexbox 与网格选择
选择使用 flexbox 还是 grid 通常取决于具体需求：
flexbox适合处理一维布局，例如行或列中的元素排列，以及元素对齐和填充。css grid 更适合处理二维布局，例如表格或复杂的网格布局，以及精确的单元格控制。
以上就是CSS Flexbox 和 Grid：构建响应式布局的艺术的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1151014.html
微信扫一扫 
支付宝扫一扫 
