https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/#align-self

display: flex;
flex-wrap: wrap;
justify-content: space-between;
 
一行两条 换行 左右对其

样式

ul.goods{
width: auto;
height: auto;
margin: 0px;
padding: 10px 30px;
background: url('../../../static/images/beshopkepper/line.png') center repeat-y;
background-size: 100%;
min-height: 230px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul.goods li{
width: 48%;
height: 200px;
border-radius: 10px;
margin-bottom: 20px;
}

css flex 属性教程的更多相关文章

  1. 【转载】CSS flex属性深入理解

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu.com/wordpress/2019/12/css-f ...

  2. css总结2:Flex 布局教程:Flex 语法(转)

    Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些 ...

  3. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  4. css 13-CSS3属性:Flex布局图文详解

    13-CSS3属性:Flex布局图文详解 #前言 CSS3中的 flex 属性,在布局方面做了非常大的改进,使得我们对多个元素之间的布局排列变得十分灵活,适应性非常强.其强大的伸缩性和自适应性,在网页 ...

  5. CSS布局学习(二) - flex属性

    flex属性 定义 flex布局包括最外层的容器和内部的元素,flex属性是内部元素属性.flex属性是flex-grow, flex-shrink, flex-basis三个属性的简写 flex-g ...

  6. CSS学习笔记(12)--Flex 布局教程:实例篇

    原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只 ...

  7. CSS学习笔记(11)--Flex 布局教程:语法篇

    原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 ...

  8. css总结3:Flex 布局教程:Flex-demos(转)

    上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇&g ...

  9. HTML/CSS:display:flex 布局教程

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

随机推荐

  1. crawlspider 多分页处理

    提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调parse方法). 方法二:基 ...

  2. WPF 自定义分页控件一

    一:右键添加新建项,选择新建自定义控件,命名为:KDataPager public class KDataPager : Control { static KDataPager() { Default ...

  3. 《机器学习实战》Logistic回归

    注释:Ng的视频有完整的推到步骤,不过理论和实践还是有很大差别的,代码实现还得完成 1.Logistic回归理论 http://www.cnblogs.com/wjy-lulu/p/7759515.h ...

  4. 浏览器预览office文件(word,Excel,等)

    提示:预览是通过后台转pdf到前台展示的过程,当然网上也有购买的api 举个栗子:(http://www.officeweb365.com/) <!DOCTYPE html> <ht ...

  5. ROS进阶学习手记 7 -- RViz仿真实例1

    [任务2]:     用simulator: RViz 工具,完成对小车的建模,名字drive RViz = dvrv, 用 dvrv_node 发布topic和数据格式,向它发送位置指令,使它能接受 ...

  6. 【HQL】常用函数

    CONCAT_WS(separator, str1, str2,...) 多列转1列,以分割符分割 使用场景: 1.多列在一列显示: 2.多列转多行作为辅助,结合split和explode使用 SEL ...

  7. java与xml转换 -- XStreamAlias

    @XStreamAlias 1.特点 简化的API; 无映射文件; 高性能,低内存占用; 整洁的XML; 不需要修改对象;支持内部私有字段,不需要setter/getter方法 提供序列化接口; 自定 ...

  8. js分钟数转天-时-分

    //js格式化分钟转为天.时.分 function formatMinutes(minutes) { )); ? Math.floor((minutes - day * ) / ) : Math.fl ...

  9. 用大白话谈谈XSS与CSRF

    这两个关键词也是老生常谈了,但是还总是容易让人忘记与搞混~.XSS与CSRF这两个关键词时常被拉出来一起比较(尤其是面试),我在这里也在写一篇扫盲文,也帮自己整理一下知识脉络. 这篇文章会用尽量“人话 ...

  10. SecureCRT显示乱码的解决办法

    下面来看看SecureCRT的显示出现乱码这种情况.比如: 现在我们重新设置一下 设置下图中的配置 1.选择字符编码为UTF-8. 2.设置字符集为GB2312后保存好后确认退出. 3.再次测试一下.