1.title部分
title共有2部分，左边的文字区域和右边的倒计数区域。
首相设置最外面的title的dispaly：flex；这样使两部分在一行上。接着设置左边的文字区域为width：60%；代表左边区域始终占60%的区域。然后设置右面的倒计时部分为flex：1，使其根据屏幕进行扩展。
2.item部分
item部分共有2部分，左边图片区和右边文字区域，文字区域有三行文字和一个按钮。
首先，将item设置为displa：flex；使左右两部分在一行上；然后设置图片大小，最后设置右边的文字区域flex：1；
总结：设置父元素为displa：flex；子元素左边设置宽度和高度，最好用百分比，用px在某些手机上布局会出现错误，然后设置另一个子元素flex：1。
兼容使用 块元素使用flex布局 行内元素使用flex布局 Webkit内核的浏览器使用flex布局（Safari...
flex 布局简介在上一篇可以找到，不再赘述。此篇主要介绍使用Flex布局、传统的 position 布局如何解决...
如何使用flex布局 flex容器的属性 1.flex-direction主轴的方向(子元素排列方式）①row（默...
div的水平垂直居中 flex布局，使用display: flex实现水平垂直居中 grid布局 使用grid布局...
简介 flex布局(Flexible布局，弹性布局)是在开发中经常使用的布局方式开启了flex布局的元素叫flex...
在flex布局之前，我们是如何布局的。主要使用： normal flow float + clear positi...
这几个属性配合使用可以更细化的控制Flex布局，flex-basis和flex-grow可控制如何分配Availa...
flex布局最后一行左对齐 随着flex布局的流行，我们工作中也免不了用flex布局，在使用flex布局的时候，大...
如何可以使用flex布局 进行平均分布，又可以换行呢？第一步：设置flex容器元素样式display: flex;...
1.flex布局 flex布局弹性布局，在移动端使用很多，在pc端应用也越来越多开启了flex布局的元素叫flex...
本文标题：如何使用Flex布局
本文链接：https://www.haomeiwen.com/subject/wjbnjctx.html
网友评论