flex布局中同一行内对齐左右两端

之前实现左右对齐都是用的float,但是用float经常会出现浮动影响,有时候清浮动也不能完全消除影响,后来用了flex之后觉得挺好用,不存在这个问题,所以现在都是能用flex就用flex,以下是用flex替代float实现左右对齐的代码
<div class="lh" style="padding: 20px 0;">
    <div style="display: flex;flex-flow: row nowrap;justify-content: space-between;background-color: white;padding: 10px;">
        <span>2017中国服务机器人大赛‘</span>
        <span>2019-11-01</span>
    </div>
</div>

最终效果如下(专注实现功能,所以页面比较简陋。。。)

原文地址:https://www.cnblogs.com/yite/p/11780767.html

时间: 2024-10-07 22:05:06

flex布局中同一行内对齐左右两端的相关文章

解决flex布局space-between最后一行左对齐

首先看代码和效果↓ <style> .main { outline: 1px solid; display: flex; justify-content: space-between; flex-wrap: wrap; } .main>div { width: 100px; height: 100px; margin-bottom: 10px; background-color: lightgreen; } </style> <body> <div clas

flex布局中 align-items 和 align-conten t的区别

参考资料:http://stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-align-content 看了很多翻译的技术文档,这一块都讲得模糊不清,看到stackoverflow上有人提问后的回答觉得十分清晰,特来分享,有不当之处欢迎指正. align-items The align-items property applies to all flex containers, a

flex布局中flex-basis|flex-grow|flex-shrink

flex布局中flex-basis|flex-grow|flex-shrink flex-grow.flex-shrink.flex-basis这三个属性的作用是:在flex布局中,父元素在不同宽度下,子元素是如何分配父元素的空间的. 其中,这三个属性都是在子元素上设置的.注:下面讲的父元素,指以flex布局的元素(display:flex). flex-basis 该属性来设置该元素的宽度.当然,width也可以用来设置元素宽度.如果元素上同时设置了width和flex-basis,那么fle

flex 布局下关于容器内成员 flex属性的理解

flex布局分为容器的设置和容器内成员的设置,容器的设置是管理成员的排列方式,也就是管理排列的方向和对齐的位置.成员的设置则是关于成员的大小和显示的位置(order). 弹性布局,弹性布局,自然要提现他的弹性,所谓弹性也就是对空间的分配.成员设置中的flex属性,就是对于额外空间的管理. flex可以设置三个值,第一个值必选,后两个可选. flex的第一个值 可以用flex-grow单独设置,代表含义是对额外空间的占据量,所谓额外空间就是这一行多余的空间,有多余的空间这一属性才有用.默认值是0,

flex布局中transform出错

在flex布局下,若应用transform 的动画的子元素没有使用进行定位,则动画过程中,子元素将相对display:flex的元素进行static定位 动画结束后位置正常: 修复代码只需要position:relative html伪代码 <flex> <div> <div> <div> <animation> css伪代码 animation{ position:relative; }

[ css 弹性盒子模型 align-content align-items属性 ] 弹性盒子模型flex布局中align-items 和align-content属性讲解及实例演示的区别

align-items align-items属性适用于所有的flex容器,它是用来设置每个flex元素在侧轴上的默认对齐方式,还有一位回答者的回答也很好,如下: align-items和align-content有相同的功能,不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中 align-content align-content属性只适用于多行的flex容器,并且当侧轴上有多余空间使flex容器内的flex线对齐,感觉这样翻译了之后还是略微有些抽象,不过有一个重点就是多行, 下面

[ css 弹性盒子模型 align-content 属性 ] 弹性盒子模型flex布局中align-content属性讲解及实例演示的区别

说明: 本属性适用于:多行的弹性盒模型容器 当伸缩容器的侧轴还有多余空间时,本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式,这与调准伸缩项目在主轴上对齐方式的 <' justify-content '> 属性类似.请注意本属性在只有一行的伸缩容器上没有效果 实例: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /&

[ css 弹性盒子模型 align-item 属性 ] 弹性盒子模型flex布局中align-item属性讲解及实例演示的区别

说明: 本属性适用于:flex容器 定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式 实例: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>align-items_CSS参考手册_web前端开发参考手册系列</title> <meta name="

[ css 弹性盒子模型 flex-shrink 属性 ] 弹性盒子模型flex布局中flex-shrink属性讲解及实例演示的区别

根据弹性盒子元素所设置的收缩因子作为比率来收缩空间 实例: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>-webkit-flex-basis_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" conten