正文 

当前位置： 首页 > java > java框架

css---flex布局

陌简001      2022-02-09     159

关键词：

Flex 是 Flexible Box 的缩写，意为"弹性布局"。任何一个容器都可以指定为 Flex 布局。语法部分参考链接在文末给出一篇阮一峰大神的文章，讲的非常详细。

 

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

 

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

在页面布局上，使用盒子布局------flex.如下图所示，下面是一种简易例子，并给出注释：

 

代码如下：

<!doctype html>
 <html>
<head>
    <title>box</title>
    <style>
        .wrap{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;//必须，此时采用flex布局
            -moz-box-orient: vertical;
            -webkit-box-orient: vertical;//子元素纵向排列
            -ms-box-orient: vertical;
            -webkit-flex-direction: column;//主线为垂直
            -ms-flex-direction: column;
            flex-direction: column;
        }
        .lay{
            width:150px;
            height:150px;
            border:1px solid red;
            margin:10px;
            padding:10px;
        }
        .box1 {
            -webkit-box-ordinal-group: 1;
            -moz-box-ordinal-group: 1;
            -ms-flex-order: 1;
            -webkit-order: 1;
            order: 1;//定义项目的排列顺序，数值越小，排列越靠前，默认为0
        }

        .box2 {
            -webkit-box-ordinal-group: 3;
            -moz-box-ordinal-group: 3;
            -ms-flex-order: 3;
            -webkit-order: 3;
            order: 3;
        }

        .box3{
            -webkit-box-ordinal-group: 2;
            -moz-box-ordinal-group: 2;
            -ms-flex-order: 2;
            -webkit-order: 2;
            order: 2;
            align-self: flex-start;//允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
                                   默认值为auto，表示继承父元素的align-items属性
            width:90%;

        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="box1 lay">
        this is box 1
    </div>
    <div class="box2 lay">
        this is box 2
    </div>
    <div class="box3 lay">
        this is box 3
    </div>

</div>
</body>
</html>

 

 

 

参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool   Flex布局教程：语法篇

 

css6：flex布局

前言：这是我看过最好的flex布局教程：30分钟彻底弄懂flex布局传统的布局方法与flex属性通览文档流：块级元素独占一行，从上往下排列，行级元素从左往右排列。displayinline-block主要用来做横向的布局。用分离负maigin用来产生位... 查看详情

css---flex布局--容器

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool容器设置   新版的为display为flex              &nb 查看详情

css：flex和floatmargin布局

一、flex布局顶部，底部固定，中间自适应(中间左固定，右自适应)。<body><divclass="container"><divclass="header"></div><divclass="content"><divclass="left"></div><divclass="right">< 查看详情

css：flex和floatmargin布局

一、flex布局顶部，底部固定，中间自适应(中间左固定，右自适应)。<body><divclass="container"><divclass="header"></div><divclass="content"><divclass="left"></div><divclass="right">< 查看详情

css flex-box嵌套布局有问题

】cssflex-box嵌套布局有问题【英文标题】：cssflex-boxnestedlayouthaveissue【发布时间】：2021-10-0604:28:47【问题描述】：我不能很好地使用flex-box。这是当前状态：我想要这个弹性布局：这是我的代码：Lobby.js（容器）constTopBlock=styled.div`... 查看详情

前端css3——flex弹性布局详解(代码片段)

文章目录一、Flex盒子的主轴与侧轴1.主轴方向flex-direction2.主轴上的对齐方式justify-content3.侧轴上的对齐方式align-items4.换行flex-wrap二、子项的flex属性1.属性解释一、Flex盒子的主轴与侧轴1.主轴方向flex-directionflex-direction:row|row-reverse... 查看详情

css:flex布局和position:absolute/fixed冲突解决

参考技术A刚开始开发css或者小程序布局时,都会遇到这样的问题,当我们同时使用flex布局与position:absolute/fixed的时候,无论怎么修改都达不到最终效果,如下图所示:我想在白色区域横向布局这个四组文字,虽然我设置display:flex,方向也... 查看详情

css[cssdebugger]一些css行帮助调试布局系统#css#flex#grid(代码片段)

查看详情

CSS Flex Box 布局：全宽行和列

】CSSFlexBox布局：全宽行和列【英文标题】：CSSFlexBoxLayout:full-widthrowandcolumns【发布时间】：2014-11-2710:38:07【问题描述】：各位程序员大家好！我有一个简单的盒子布局，我很想用flexbox来实现，但我就是想不通。它应该看起来像这... 查看详情

伸缩布局(代码片段)

伸缩布局参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex以前在网页开发过程中，布局一直是不可或缺的，从最早的表格布局，到后来的DIV+CSS布局，现在再到CSS3的伸缩布局。CSS3在布局方面做了非常大的改进，使得我们对块... 查看详情

css flex布局在某些iPad上不起作用

】cssflex布局在某些iPad上不起作用【英文标题】：cssflexlayoutnotworkingonsomeiPads【发布时间】：2016-05-1810:25:44【问题描述】：我在ipad上遇到了一些flex问题。我想要三个等距的盒子。它在我的ipad和各种浏览器（包括桌面上的safari）上... 查看详情

如何使用 css flex 框创建滑块布局？

】如何使用cssflex框创建滑块布局？【英文标题】：HowcanIcreatesliderlayoutwithcssflexboxes?【发布时间】：2019-07-1820:30:14【问题描述】：我正在尝试使用弹性框创建滑块布局，例如这张照片：在这里，我在右侧有大照片，在左侧有缩略... 查看详情

为啥 Javascript 滑块会破坏我的 css flex 布局？ [复制]

】为啥Javascript滑块会破坏我的cssflex布局？[复制]【英文标题】：WhyJavascriptslidersbreakmycssflexlayout?[duplicate]为什么Javascript滑块会破坏我的cssflex布局？[复制]【发布时间】：2019-04-0100:04:32【问题描述】：我正在学习cssflexbox，但我在... 查看详情

flex布局总结(详细)(代码片段)

Flex布局以前在网页开发过程中，布局一直是不可或缺的，从最早的表格布局，到后来的DIV+CSS布局，现在再到CSS3的伸缩布局。最近在写小程序的项目中flex布局用得非常多，其适应性也非常强，其强大的... 查看详情

flex布局

这只是一个介绍flex布局的中转站，作为盒端开发人员，这个知识点根本就用不上（因为盒子上的浏览器不支持，也就平时自己写点小东西玩的时候用到了）。只是用来简单布局的话，建议直接查手册，我常用的手册网址：http://w... 查看详情

css--flex常用的属性

Flex布局display:flex指定当前盒子为伸缩盒flex-direction:column把盒子内容垂直从上往下排列row把盒子内容垂直从左往右排列flex-wrap:wrap;如果内容放不下就会换行排列，类似浮动justify-content:space-between;水平对齐方式align-items:center;垂直对... 查看详情

css3display：flex和display：box有啥区别

...型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性... 查看详情

CSS Flex 网格 - 最后一项的宽度相同

...【问题描述】：嘿，我正在尝试为画廊创建一个响应式框布局，看起来像这样http://webdesignerwall.com/demo/responsive-column-grid/这个例子的问题是宽度是硬编码的，而且媒体查询是必要的。我有很多专栏可以作为一个可行的解决方案。 查看详情