资讯专栏INFORMATION COLUMN

flex-骰子布局

shusen / 979人阅读

 

弹性容器单行:主轴居中,交叉轴居中。

1 display: flex;
2 flex-direction: row;
3 align-items: center;
4 justify-content: center;

 

弹性容器单行;主轴两端对齐;交叉轴一个为起点边缘;一个为终点边缘;

display: flex;
flex-direction: row;
justify-content: space-between;

 

单选;主轴两端对齐;交叉轴一个为起点边缘;一个为居中对齐;一个为终点边缘;

display: flex;
flex-direction: row;
justify-content: space-between;

 

<div class="row">
    <div class="d" style="align-self: flex-start">div>
    <div class="d" style="align-self: center">div>
    <div class="d" style="align-self: flex-end">div>
div>

 

1:弹性窗口设置为多行,交叉轴为两端对齐

flex-direction: row;
flex-wrap: wrap;
align-content: space-between;

 

2:每行基础大小设置为100%,然后每个子行主轴为两端对齐

display: flex;
justify-content: space-between;
flex-basis: 100%;

 

<div class="row">
    <div class="tr">
        <div class="d">div>
        <div class="d">div>
    div>
    <div class="tr">
        <div class="d">div>
        <div class="d">div>
    div>
div>

 

在4的基础上增加一行,设置为主轴居中

display: flex;
flex-basis: 100%;
justify-content: center;

 

<div class="row">
    <div class="tr">
        <div class="d">div>
        <div class="d">div>
    div>
    <div class="tr-c">
        <div class="d">div>
    div>
    <div class="tr">
        <div class="d">div>
        <div class="d">div>
    div>
div>

在4的基本上增加一行

<div class="row">
    <div class="tr">
        <div class="d">div>
        <div class="d">div>
    div>
    <div class="tr">
        <div class="d">div>
        <div class="d">div>
    div>
    <div class="tr">
        <div class="d">div>
        <div class="d">div>
    div>
div>

 

没有设置对齐方式之前弹性项目大小是拉伸的,设置之后大小由内部撑大。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1172.html

相关文章

  • 微信小程序开发必备必看常用的Flex布局模式-wxflex

    摘要:首发地址微信小程序的布局种必备常用的布局模式代码库地址官方建议的布局的布局相比传统的布局来说,简单快捷方便。 首发地址:http://weappdev.com/t/flex-wx... wxflex 微信小程序的Flex布局demo-4种必备常用的Flex布局模式 代码库 github地址:https://github.com/icindy/wxflex 官方建议的Flex布局 Fle...

    jzzlee 评论0 收藏0
  • 常用的布局方式之 Flex 布局

    摘要:常用的布局方式之布局一布局介绍人们已经慢慢放弃了低版本浏览器,所以布局是现在首选的布局方式。使用了属性的标签,我们称之为容器,它的所有子元素自动成为容器成员,我们称之为项目。属性用来控制项目在侧轴的对齐方式。是和的简写形式。 常用的布局方式之 Flex 布局 一、 Flex布局介绍 人们已经慢慢放弃了低版本浏览器,所以 flex 布局是现在首选的布局方式。 flex 布局又称之为 弹性...

    Mertens 评论0 收藏0
  • css3 弹性布局和多列布局

    摘要:弹性盒子基础弹性盒子是中盒子模型的弹性布局,在传统的布局方式上增加了很多灵活性。定义一个弹性盒子在父盒子上定义属性内核浏览器的兼容设置,下同当然还有行内布局的弹性盒子注意,设为布局以后,子元素的和属性将失效。 弹性盒子基础 弹性盒子(Flexible Box)是css3中盒子模型的弹性布局,在传统的布局方式上增加了很多灵活性。 定义一个弹性盒子 在父盒子上定义display属性: #b...

    stormzhang 评论0 收藏0
  • CSS及布局

    摘要:经过半年的打磨,正式发布,主要是新增了一些常用组件,并使用命名,为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看...

    jaysun 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<