可以自己做效果图的网站,优质的网站建设推广,公司用的网站用个人备案可以吗,免费推广网站在线#x1f680; 优质资源分享 #x1f680;
学习路线指引#xff08;点击解锁#xff09;知识定位人群定位#x1f9e1; Python实战微信订餐小程序 #x1f9e1;进阶级本课程是python flask微信小程序的完美结合#xff0c;从项目搭建到腾讯云部署上线#xff0c;打造一… 优质资源分享
学习路线指引点击解锁知识定位人群定位 Python实战微信订餐小程序 进阶级本课程是python flask微信小程序的完美结合从项目搭建到腾讯云部署上线打造一个全栈订餐系统。Python量化交易实战入门级手把手带你打造一个易扩展、更安全、效率更高的量化交易系统
认识弹性盒子flex 来源https://blog.xybin.top/2022/flex 1、定义弹性布局父级上定义display:flex; 如果说内核为webkit 的必须前面加上 -webkit-flex
2、设置了弹性布局之后子元素的css中的float, clear, vertical-align 这些属性将失效。
3、可以将flex弹性布局看成一个大盒子也就是一个大容器只要将它定义为 display:flex; 即它里面所有的子元素均自动成为容器的成员专业术语称之为 项目
4、默认情况下项目都是在容器里面水平排列的即按照主轴排列且是顺时针方向的。需1,2,3也就是x轴方向。默认情况都是 flex-direction:row;
div classbox
div classboxone第一个div
div classboxtwo第二个div
div classboxthree第三个div
div
css样式
.box{
width: 500px;
height:400px;
background: pink;
display: flex;
}
.boxone{
width: 100px;
height:200px;
background: red;
}
.boxtwo{
width: 100px;
height:200px;
background: orange;
}
.boxthree{
width: 100px;
height:200px;
background: yellow;
}
示例
第一个 第二个 第三个
5、如果是需要它反着排列3,2,1排列此时就需要用到 flex-direction:row-reverse;(和我们的全部 float:right; 是一样的效果)
.box{
width: 500px;
height:400px;
background: pink;
display: flex;
flex-direction:row-reverse;
}
示例
第一个 第二个 第三个 来源https://blog.xybin.top/2022/flex 6、除了按照主轴方向排列还有按照y轴方向排列的。 加上 flex-direction:column;
.box{
width: 500px;
height:400px;
background: pink;
display: flex;
flex-direction:column;
}
示例
第一个 第二个 第三个
7、同理y轴方向上倒序排列flex-direction:column-reverse;
示例
第一个 第二个 第三个
、 8、当我们容器里面的项目太多。这个时候我们会发现。这些项目都挤到了一起。项目本身的宽度根本就不起作用。以上的html代码我们我加入几个盒子上去。 示例
第一个 第二个 第三个 第四个 第五个 第六个
9、怎样才能让这些盒子本身的宽度起到作用一行排不到能够自动的排第二排呢这边就需要用到弹性布局中的换行。
flex-wrap:wrap;
.box{
width: 500px;
height:400px;
background: pink;
display: flex;
flex-wrap:wrap;
}
示例
第一个 第二个 第三个 第四个 第五个 第六个
flex-wrapnowrap; (不换行)flex-wrapwrap;换行flex-wrapwrap-reverse;倒序换行
倒序换行效果 示例
第一个 第二个 第三个 第四个 第五个 第六个 来源https://blog.xybin.top/2022/flex 10、上面的换行默认情况是以x轴换行的当然还有以y轴来换行的也就是说第一列排满了之后再排第二列。 此时就需要用到 flex-flow:row nowrap; (默认情况) flex-flow:column wrap; (y轴换行) flex-flow:column wrap-reverse;(倒序y轴换行)
y轴换行
.box{
width: 500px;
height:400px;
background: pink;
display: flex;
flex-flow:column wrap;
}
示例
第一个 第二个 第三个 第四个 第五个 第六个
倒序y轴换行 示例
第一个 第二个 第三个 第四个 第五个 第六个
11、那在css中的位置关系水平方向的左中右垂直方向的上中下 用弹性布局怎么实现呢这里就给大家介绍弹性布局怎样来实现的。首先看水平反向
水平方向布局 justify-content:flex-start; 水平左justify-content:center; 中justify-content:flex-end; 水平右justify-content:space-around; 居中显示两边也空有间隙justify-content:space-between; 两边不留空隙
依次看下效果 justify-content:flex-start; 水平左 默认的 示例
第一个 第二个 第三个
justify-content:center; 中 示例
第一个 第二个 第三个
justify-content:flex-end; 水平右 示例
第一个 第二个 第三个
justify-content:space-around; 居中显示两边也空有间隙且是均等的 示例
第一个 第二个 第三个
justify-content:space-between; 两边不留空隙平均排列的
示例
第一个 第二个 第三个
垂直方向布局 align-items:flex-start; 上align-items:center; 中 比起css样式垂直反向居中flex弹性布局是个不错的优势align-items:flex-end; 下
这边就演示一个垂直底部 示例
第一个 第二个 第三个
但是以上的垂直位置排版必须建立在一个前提条件下即 单行 只有一行 。对于多行即换行的表现出来的样子并不是我们需要看到的
如下
div classboxdiv classboxone第一个divdiv classboxtwo第二个divdiv classboxthree第三个divdiv classboxone第四个divdiv classboxtwo第五个divdiv classboxthree第六个div
div
.box{
width: 500px;
height:800px;
background: pink;
display: flex;
flex-wrap:wrap;
align-content:center;
}
示例
第一个 第二个 第三个 第四个 第五个 第六个
此时对于多行的我们用另外一个属性。即 align-content:center; 其他上 下 也是一样的如果是多行的话即把items改成content 即可 其他几个也是一样的 示例
第一个 第二个 第三个 第四个 第五个 第六个
12、order属性 定义项目的排雷顺序order的值越小排列在越前面。 这个属性是写在需要换顺序的子集上的也就是项目上的。默认为0
div classboxdiv classboxone第一个divdiv classboxtwo第二个divdiv classboxthree第三个div
div
.box{
width: 500px;
height:600px;
background: pink;
display: flex;
flex-wrap:wrap;
align-items:center;
}
.boxone{
width: 100px;
height:200px;
background: red;
order:3;
}
.boxtwo{
width: 100px;
height:200px;
background: orange;
order:1;
}
.boxthree{
width: 100px;
height:200px;
background: yellow;
}
示例
第一个 第二个 第三个 来源https://blog.xybin.top/2022/flex
