网站权重2的网站,ftp上传网站 需要什么文件,asp汽车驾驶培训学校网站源码,郑州网站推广优化公司CSS 的弹性布局
前言
前端中为了实现页面的布局效果#xff0c;采用的一个技术手段#xff0c;它在前端开发的技术场景是非常广泛的 实现上述区域的页面相关的布局效果#xff0c;就可以使用弹性布局来完成
弹性布局(flex布局) flex 是 flexible box 的缩写#xff0c;…CSS 的弹性布局
前言
前端中为了实现页面的布局效果采用的一个技术手段它在前端开发的技术场景是非常广泛的 实现上述区域的页面相关的布局效果就可以使用弹性布局来完成
弹性布局(flex布局) flex 是 flexible box 的缩写意思为 “弹性盒子” 弹性布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式 注任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局
被设置为 display:flex 属性的元素称为flex container它的所有子元素也可以被叫做该容器的成员称为 flex itemflex item可以纵向排列, 也可以横向排列排列的flex item称为flex direction(主轴) 代码演示
1.最初代码 最初效果
2.给div加上 display:flex 之后代码如下 运行效果 常用属性 注: 属性要加在子标签对应的父级元素上 justify-content
justify-content设置主轴上的子元素排列方式
属性取值描述start默认值位于容器的开头。end位于容器的结尾center位于容器中央space-between子元素在行与行之间留有间隔,均匀排布space-around在行之前、行之间和行之后留有空间
代码演示
1.主轴居中展示 运行效果
2.修改为 justify-content: start;主轴居左展示
3.修改为 justify-content: end;主轴居右展示
4.修改为 justify-content: space-between; 5.修改为 justify-content: space-around; align-items
设置侧轴上的元素排列方式
属性取值描述stretch默认值行拉伸以占据剩余空间center朝着弹性容器的中央对行打包start朝着弹性容器的开头对行打包end朝着弹性容器的结尾对行打包space- between行均匀分布在弹性容器中space-around行均匀分布在弹性容器中两端各占一半
注: align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents
代码演示
1.侧轴居中展示 运行效果 2.修改为 align-item: start;侧轴居左展示(默认情况)
3.修改为 align-item: end;侧轴居右展示
