flexbox布局

最新推荐文章于 2023-08-28 22:11:23 发布
最新推荐文章于 2023-08-28 22:11:23 发布
阅读量108 收藏
点赞数

1、flex兼容性

根据caniuse（http://caniuse.com/#search=flex），flex布局在IE6-9不支持。

因此，flex布局主要应用在移动端。

 

2、基础测试代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            .item {
                /*flex布局*/
                display: flex;
            }
        </style>
    </head>

    <body>
        <div class="item">
            <div class="item-img">
                <img src="img/aaa.jpg" alt="" />
            </div>
            <div class="item-desc">
                <h3>说明</h3>
            </div>
        </div>

    </body>

</html>

效果：

 

说明：

将父元素设置为flex布局后，子元素也默认成了弹性元素，子元素并会自动沿主轴方向横向排列。

 

3、弹性布局轴

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            .hb-shelf {
                /*flex布局*/
                display: flex;                
            }
            
            .item {
                width: 240px;
                border: 1px solid red;
            }
        </style>
    </head>

    <body>
        <section class="hb-shelf">
            <article class="item">
                1
            </article>
            <article class="item">
                2
            </article>
            <article class="item">
                3
            </article>
            <article class="item">
                4
            </article>
        </section>

    </body>

</html>

 

给item设置宽度后，在浮动布局中，浏览器尽可能显示article的元素，直到填充满一整行才折行显示。

在flex布局中，flex-wrap: nowrap;值优先级高于article的宽度值width。当屏幕宽度小于960px时，保证所有的article等分扩展填充；当屏幕宽度大于960px时，右侧留空白。

效果：

 

weixin_34061555
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flexbox（弹性盒布局模型）,以及适用场景？
Excellent_W的博客
04-18 222
简称flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局采用Flex布局的元素，称为flex容器container它的所有子元素自动成为容器成员，称为flex项目item容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过来决定主轴的方向每根轴都有起点和终点，这对于元素的对齐非常重要。
一张图了解flexbox布局.pdf
11-05
一张图了解flexbox布局
微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效
qq_63570804的博客
07-29 4715
微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效
flex弹性布局（详解）
热门推荐
wshwsh_的博客
08-09 1万+
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
Flex box 弹性盒子常用方法
最新发布
Muskok的博客
08-28 473
弹性盒子（flex box）是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
Flexbox 布局的最简单表单的实现
09-22
为了应用Flexbox布局，我们需要将`<form>`元素的`display`属性设置为`flex`： ```css form { display: flex; } ``` 这一步骤会改变控件的排列方式，消除它们之间的默认间隔。此时，由于`flex-grow`属性默认为0，...
css使用flexbox布局容器内多元素水平居中
09-24
首先，要实现容器内多元素的水平居中，我们需要在父元素上应用Flexbox布局。在CSS中，我们可以通过设置`display`属性为`flex`来开启Flexbox模式。例如： ```css .parent { display: flex; } ``` 接下来，为了让...
浅谈React Native Flexbox布局(小结)
08-28
React Native Flexbox 布局详细知识点 React Native Flexbox 布局是指在 React Native 中使用 Flexbox 布局的技术，主要应用于移动应用程序的用户界面设计。下面是 React Native Flexbox 布局的详细知识点： 1. ...
flexbox布局演示
02-19
AngularFlexLayout 该项目是使用版本11.1.0生成的。开发服务器为开发服务器运行ng serve 。... 如果您更改任何源文件，该应用程序将自动重新加载。代码脚手架运行ng generate component component-name生成一个新的组件...
flexbox
03-06
弹性盒
Android-Android的Flexbox布局
08-12
Flexbox布局，源于Web开发中的CSS Flexbox布局模型，被引入到Android系统中，为开发者提供了一种更灵活、更强大的方式来排列和对齐组件。FlexboxLayout允许我们创建响应式、自适应的布局，无论是垂直、水平还是交叉...
CSS3的Flexbox布局的简明入门指南
01-19
Flexbox布局概念 Flexbox布局（ Flexible Box 或CSS3 弹性布局），是CSS3中的一种新的布局模式，是可以自动调整子元素的高和宽，来很好的填充任何不同屏幕大小的显示设备中的可用显示空间，收缩内容防止内容溢出，...
flexbox布局神器使用SASS语法编写
08-09
Flexbox布局神器是一种基于CSS3 Flexible Box布局模块的前端开发技术，它极大地简化了网页复杂的二维布局，尤其在处理响应式设计和动态内容时表现出强大的灵活性。本项目使用SASS（Syntactically Awesome Style ...
从微信小程序看待FlexBox布局
03-29
下面主要通过一些例子来聊聊FlexBox布局，其实它和ReactNative大同小异。所以学习一门技术，其它的也就不愁了。下面主要通过一些例子来说明FlexBox是如何布局的。 FlexBox概述 (此图片来源于网络，如有侵权，请联系...
Flex布局
01-12 214
Flex布局flex布局是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局，包括行内元素，例如： .box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ displ...
css Flexbox布局用法
changluanba5728的博客
07-12 159
CSS Flexbox布局模块 在Flexbox布局模块之前，有四种布局模式：块（block），用于网页中的部分内联（inline），用于文本表（table），用于二维表数据定位（position），用于元素的显式位置Flexbox布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。注意兼容问题：webkit内核浏览器应使用前缀-webkitIE浏览器，可以很好的兼容IE11+版...
微信小程序样式Flex Box精通课程-Flex容器的属性-flex-direction 项目排列方向
杭州.黄老师
01-14 3147
flex-direction 项目排列方向 基础语法 flex-direction属性决定主轴的方向（即项目的排列方向）：（左中右 上中下） .box { flex-direction: row | row-reverse | column | column-reverse; }  row（默认值）：主轴为水平方向，起点在左端。  row-reverse：主轴为水平方向，起点在右端。...
快速布局神器Flexbox布局
smilebigdear的专栏
01-10 920
转： http://blog.csdn.net/qq_23191031/article/details/53084017 基础部分： Flex布局是什么？ Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 .box{   display: flex; } 1 2 3 1
flexbox布局实现效果
07-20
下面是一些常见的Flexbox布局效果： 1. 垂直居中： ```css .container { display: flex; align-items: center; justify-content: center; } ``` 2. 水平居中： ```css .container { display: flex; justify-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值