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. Android最新版支付宝支付集成

    上次集成支付宝支付已经很久了,今天写东西用到了支付宝支付,就大致写一下流程: 去蚂蚁金服下载最新版的Android&IOS端SDK 全部文档 -- 资源下载 -- App支付客户端 下载后解压 ...

  2. Struts2学习:值栈(value stack)

    1.index.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %& ...

  3. swagger常用注解

    @Api:修饰整个类,描述Controller的作用 @ApiOperation:描述一个类的一个方法,或者说一个接口 @ApiParam:单个参数描述 @ApiModel:用对象来接收参数 @Api ...

  4. RPM软件管理工具

    1 概述 RPM(RedHat Package Manager),Rethat软件包管理工具,类似windows里面的setup.exe 是Linux这系列操作系统里面的打包安装工具,它虽然是RedH ...

  5. 笔记:Sublime Text 3

    http://www.sublimetext.com/3 Sublime Text官网 http://www.sublimetextcn.com/3/ Sublime Text中文官网 http:// ...

  6. 在keil调用Notepad++

    先打开keil, 新建一个 取名为notepad 选择notepad++的安装路径 设置参数 保持后可以看多了notepad的选项 运行当前的文件在notepad++打开

  7. Spring Cloud (3)B Ribbon 负载均衡 IRule

    package com.service.config; import com.netflix.loadbalancer.IRule;import com.netflix.loadbalancer.Ra ...

  8. axios请求带上cookie配置

    Axios.defaults.withCredentials = true 参考:https://segmentfault.com/a/1190000008872646

  9. 机器学习入门-数值特征-进行二值化变化 1.Binarizer(进行数据的二值化操作)

    函数说明: 1. Binarizer(threshold=0.9) 将数据进行二值化,threshold表示大于0.9的数据为1,小于0.9的数据为0 对于一些数值型的特征:存在0还有其他的一些数 二 ...

  10. git异常

    1.  SSL certificate problem: self signed certificate 因git默认是ssl方式验证,在采用http请求时,是使用的账号密码方式,因此需要git放行. ...