网站公司怎么做推广方案,个人备案 什么网站,网站开发运行及维护,网站开发验收确认书一#xff1a;什么是弹性布局-Flex flex 是 Flexible Box 的缩写#xff0c;意为弹性布局#xff0c;用来为盒状模型提供最大的灵活性。 语法#xff1a;
.box{display: flex;
}
.box{display: inline-flex;
} 注意#xff0c;设为 Flex 布局以后#xff0…一什么是弹性布局-Flex flex 是 Flexible Box 的缩写意为弹性布局用来为盒状模型提供最大的灵活性。 语法
.box{display: flex;
}
.box{display: inline-flex;
} 注意设为 Flex 布局以后子元素的float、clear和vertical-align属性将失效。 基本概念 按照我自己的理解横向代表主轴的方向纵向代表交叉轴的方向横向的方向由左到右为开始到结束纵向则是由上到下。 我将被设置弹性布局的盒子称作父元素将里面的内容称为子元素。方便记忆。 通常设置盒子页面都是按照标准流进行排列。块元素的话就是从上到下排列。如下图。 现在给父元素也就是绿色的盒子设置弹性布局。 子元素的盒子会自动按照主轴方向排列。 !DOCTYPE html
htmlheadmeta charsetutf-8title弹性布局/titlestyle typetext/css.main-box {width: 800px;height: 300px;background-color: aquamarine;margin: 0 auto;/* 设置弹性盒子 */display: flex;}.main-boxdiv {width: 200px;height: 200px;border: 1px solid red;font-size: 20px;color: #000;}/style/headbodydiv classmain-boxdiv1/divdiv2/divdiv3/div/div/body
/html 以下6个属性设置在容器上。 flex-direction项目的排列方向 flex-wrap项目如何换行 flex-flow flex-direction 属性和 flex-wrap的简写方式。 justify-content项目在主轴上的对齐方式 align-items项目在交叉轴上如何对齐 align-content多根轴线的对齐方式 1 flex-direction项目的排列方向 flex-direction默认排列为主轴方向也就是水平方向。
box {flex-direction: row | row-reverse | column | column-reverse;
}row默认方向主轴的方向 row-reverse主轴方向但元素会从主轴结束的方向开始排列并且元素的顺序会反过来。 column交叉轴方向 colmun-reverse交叉轴方向但元素会从交叉轴结束的方向开始排列并且元素的顺序会反过来。。 flex-direction: row-reverse; 设置交叉轴方向
flex-direction: column; 设置交叉轴反向
flex-direction: column-reverse; 2flex-wrap项目如何换行 首先弹性布局默认是不会换行当子元素的宽度或者高度总和加起来大于父元素的宽度时子元素会被压缩。如下。 这时如果需要换行则需要flex-warp属性来控制flex-warp默认是 flex-warp: no-warp;
这时将其值为flex-warp: warp; flex-wrap: wrap; 交叉轴方向换行 .main-box {width: 800px;height: 300px;background-color: aquamarine;margin: 0 auto;/* 设置弹性盒子 */display: flex;/* 设置交叉轴方向 */flex-direction: column;flex-wrap: wrap;
}
3justify-content项目在主轴上的对齐方式
.box {justify-content: flex-start | flex-end | center | space-between |space-around;
}
justify-content: flex-start; justify-content: flex-end; justify-content: space-between; justify-content: space-around; justify-content: space-evenly; space-around与space-evenly的区别是space-evenly的间隙全是一样的而sapce-around的最左右两别的间隙和子元素之间的间隙是不一样的space-beween的只有中间存在空隙。 4 align-items项目在交叉轴上如何对齐
.box {align-items: flex-start | flex-end | center | baseline | stretch;
}
align-items: flex-start; align-items: flex-end; align-items: center; align-items: baseline;以第一行文字的基线作为对齐的基准。
align-items: baseline; 如果子元素未设置高度而设置了align-items: stretch; 则会占满整个父元素。
!DOCTYPE html
htmlheadmeta charsetutf-8title弹性布局/titlestyle typetext/css.main-box {width: 800px;height: 300px;background-color: aquamarine;margin: 0 auto;/* 设置弹性盒子 */display: flex;/* 设置交叉轴方向 */align-items: stretch;}.main-boxdiv {width: 100px;/* height: 300px; */border: 1px solid red;font-size: 20px;color: #000;}/style/headbodydiv classmain-boxdiv classbox11/divdiv classbox22/divdiv classbox33/divdiv classbox44/divdiv classbox55/div/div/body
/html 5 align-content多根轴线的对齐方式 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线该属性不起作用。
.box {align-content: flex-start | flex-end | center | space-between | spacearound | stretch;
}
align-content: flex-start; align-content: flex-end; align-content: space-around; align-content: space-between; align-content: space-evenly; align-content: center; align-content: stretch; 今天就先这样。。。。。。
