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. KVM CPU线程等学习记录

    绝大多数操作系统调度单位是线程.线程是调度和分配的基本单位,进程是资源拥有的基本单位.linux下fork的叫进程pthread叫线程创建进程比线程性能要差好多5-100倍,因进程不同而异.进程之间共 ...

  2. TP5实现邮件发送(PHP 利用QQ邮箱发送邮件「PHPMailer」)

    在 PHP 应用开发中,往往需要验证用户邮箱.发送消息通知,而使用 PHP 内置的 mail() 函数,则需要邮件系统的支持. 如果熟悉 IMAP/SMTP 协议,结合 Socket 功能就可以编写邮 ...

  3. IE兼容性问题的总结

    一.IE6/IE7对display:inline-block的支持欠缺 1.表现描述 这个应该算是很经典的ie兼容性问题了,inline-block作用就是将块级元素以行的等式显示.在主流浏览器中水平 ...

  4. MVC字符串转json,ajax接受json返回值

    #region 功能 /// <summary> /// 查询 微信用户一定年月的账单 /// </summary> /// <param name="year ...

  5. .NET MVC 保存Session值,6位数验证码

    //6位数验证码: Random rm = new Random(); , ).ToString(); //MVC控制器Action中 保存session值 System.Web.HttpContex ...

  6. 《机器学习实战》ID3算法实现

    注释:之前从未接触过决策树,直接上手对着书看源码,有点难,确实有点难-- 本代码是基于ID3编写,之后的ID4.5和CART等还没学习到 一.决策树的原理 没有看网上原理,直接看源码懂得原理,下面是我 ...

  7. 0. 前言【从零开始学Spring Boot】

    [视频&交流平台] àSpringBoot视频 http://study.163.com/course/introduction.htm?courseId=1004329008&utm ...

  8. Linux网络管理-相关笔记【自用】

    ISO/OSI七层模型应用层            APDU 应用层协议数据单元   越靠近用户表示层            PPDU 表示层协议数据单元会话层            SPDU 会话协 ...

  9. 17.docker及scrapy-splash安装-1

    docker 安装网址: https://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/ 这就安装成功了!!!

  10. 键值对操作 之 combineByKey

    combineByKey( createCombiner,mergeValue,mergeCombiners,partitioner) combineByKey() 是最为常用的基于键进行聚合的函数. ...