css3 flex 详解,可以实现div内容水平垂直居中

最新推荐文章于 2024-04-11 09:50:43 发布
最新推荐文章于 2024-04-11 09:50:43 发布
阅读量602 收藏
点赞数
文章标签： css3
原文链接：https://www.cnblogs.com/xianxianxxx/p/8086554.html
版权

先说一下flex一系列属性：

一、flex-direction: （元素排列方向）

※ flex-direction:row （横向从左到右排列==左对齐）

※ flex-direction:row-reverse （与row 相反）
　　　　　　
※ flex-direction:column （从上往下排列==顶对齐）
　　　　　　
※ flex-direction:column-reverse （与column 相反）
　　　　　　
二、flex-wrap: （内容一行容不下的时候才有效）

※ flex-wrap:nowrap （超出不换行，很奇怪里面的宽度会变成100%）

※ flex-wrap:wrap （超出按父级的高度平分）
　　　　　　
※ flex-wrap:wrap-reverse（与wrap 相反）
　　　　　　　
三、justify-content: （水平对齐方式）

※ justify-content:flex-start （水平左对齐）

※ justify-content:flex-end; （水平右对齐）
　　　　　　　　
※ justify-content:center; （水平居中对齐）
　　　　　　　　
※ justify-content:space-between; （两端对齐）
　　　　　　　　
※ justify-content:space-around; （两端间距对其）

四、align-items: （垂直对齐方式）

※ align-items:stretch; （默认）

※ align-items:flex-start; （上对齐，和默认差不多）
　　　　　　　　
※ align-items:flex-end; （下对齐）
　　　　　　　　
※ align-items:center;（居中对齐）
　　　　　　　　　
※ align-items:baseline; （基线对齐）

以上是对flex的简单介绍。下面有个小例子，
大家经常用到的，某个div里面水平垂直居中，


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                display: flex;
                display: -webkit-flex;
                border: 1px solid #0000FF;
                height: 200px;
                width: 400px;
                align-items:center;
                justify-content:center;
            }
            .item{
                width: 50px;
                height: 40px;
                border: 1px solid #00C1B3;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
    </body>
</html>
lanzengquan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现元素水平垂直居中的4种方法
青衫客~的博客
09-30 4162
引 元素的垂直水平居中在网页开发中极为常见，其实现方法也多种多样，接下来将介绍4种实现元素垂直水平居中的方法。实现效果如图： <body> <div class="father"> <div class="son"></div> </div> </body> 一、 使用弹性盒模型flex实现 设置父元素的布局方式为flex， display: flex; 设置父元素在水平方向上的对齐方式为居中对齐，j
css实现元素水平垂直居中常见的两种方式实例详解
09-24
总结来说，CSS实现元素的水平垂直居中有多种方法，这里主要介绍了flexbox布局和绝对定位结合负margin的两种常见方式。Flexbox方法更现代且适应性强，适合现代浏览器环境；而绝对定位的方法在一些老版本的浏览器中...
css垂直水平居中的详细实现方式（6种）
weixin_46591819的博客
02-22 8617
css垂直水平居中方式
一文搞懂 CSS Flexbox 布局 - 2024年最新版，2024年五面蚂蚁
最新发布
2401_84141293的博客
04-11 973
但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。，即主轴方向的尺寸，那么，在行排布模式下，也就是水平方向的尺寸，其实就是子元素的宽度，而在列模式下，它是子元素的高度，相对应的也有。，即在行模式下，如果子元素设置了宽度，它就取自这个宽度值，没有设置的话，就是内容的宽度。
div水平居中的几种方法
热门推荐
我有一个梦的博客
06-17 3万+
前提 在面试的时候，面试官可能会问到如何让一个div水平垂直居中呢？接下来我将为大家列举常见的几种方法来实现它。 准备 首先准备一个父盒子和一个子盒子，并给它们添加一下样式，方便我们观察。 HTML代码 <div class="parent"> <div class="son"></div> </div> CSS代码 .parent { wid...
css垂直水平居中(父元素宽高有无情况）+ flex用法
Rziziの博客
01-26 1067
1. 父元素设置display:flex, 子元素设置 margin:auto. 2. 父元素相对定位，子元素绝对定位 4个属性都设置0，再设置margin:auto. 3. 父元素相对定位，子元素绝对定位，`left:50%,top:50%,transform:translate(-50%,-50%)` 4. flex布局，父元素 `display:flex,justify-content:center,align-items:center`
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。Flex布局允许开发者更灵活地控制元素的大小、位置和顺序，即使元素尺寸...
纯CSS实现垂直居中的9种方法
09-24
- CSS样式：设置`.box2`的`display`属性为`flex`，然后使用`justify-content: center`和`align-items: center`实现水平和垂直居中。这种方法在现代浏览器中具有很好的兼容性，是目前最推荐的实现方式。 3. **绝对...
vue实现长图垂直居上 vue实现短图垂直居中
08-29
实现短图垂直居中的布局效果，可以使用 Vue 的弹性布局系统和 CSS 的 flex 布局方式。在 HTML 代码中，我们可以使用一个容器元素，例如 `<div>`，并将其设置为高度为百分百。然后，我们可以使用 CSS 来设置该容器...
关于css水平居中的小小探讨
09-24
【CSS水平居中技术详解】 在网页设计中，CSS（层叠样式表）的水平居中布局是一项基础但至关重要的技能。本文将深入探讨几种常见的CSS水平居中方法，包括行内元素、固定宽度和不定宽度块级元素的居中策略。 首先，...
CSS布局：Flex布局
前端御书房
11-26 1244
flex布局又称为弹性布局。弹性布局相关属性分为四大类目，分别为流向控制、对齐方式、顺序控制、弹性设置。
flex布局
yanzi_0216的博客
10-13 368
flex布局 一、布局 块级元素flex布局 display: flex; 内联元素flex布局 display: inline-flex; 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 二、基本概念 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cros
使用Flex布局实现盒子的水平垂直居中
笔记
01-02 940
在日常的开发中，我们经常会制作登录注册框，一般这种框都是水平垂直于整个页面的，像这种的话一般都是用flex布局书写，因为这样最简洁方便。话不多说，直接上代码。
flex属性问题以及内容居中
dada_master的博客
10-03 4996
老早之前弄懂flex这一块来着，结果面试的时候没有复习好，面试官说你写一个居中吧。（这一块脑子一片空白）， 结果就随说口而出margin：0 auto；text-align:center;额。。。。。后果然后又说了可以弹性盒子实现，额。。。脑子一片空白，忘了！！！然后一通乱说，挂！！ 最基础的忘记了 可以看这个点击打开链接(最先开始学习的，里面还有相关的链接，挺详细的) 我这里主要说明下f
用flex将内容在div里居中
weixin_38330185的博客
01-22 1788
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; body{ margin: 0px auto; }
flex布局垂直居中
06-19 133
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ ...
css3 flex 垂直水平居中
06-06
CSS3的Flex布局提供了一种简单方便的方式实现水平和垂直居中。在一个父元素上，设置display: flex，并在其中的子元素上使用align-items和justify-content属性来实现。 要实现垂直居中，可以将父元素的align-items属性设置为center。这将使所有子元素在父元素垂直中心对齐。如果希望水平居中子元素，则将父元素的justify-content属性设置为center，这将使所有子元素在父元素水平中心对齐。 如果希望同时实现水平和垂直居中，可以将父元素的align-items和justify-content属性都设置为center。 以下是一个带有Flex布局的HTML和CSS代码示例，演示如何实现水平和垂直居中。 HTML ``` <div class="container"> <div class="box">居中文本</div> </div> ``` CSS ``` .container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ height: 100vh; /* 设置高度，确保盒子居中显示 */ } .box { text-align: center; } ``` 在上面的示例中，父元素.container设置了display: flex以使用Flex布局，而子元素.box则具有居中文本的样式。通过设置父元素的align-items和justify-content属性值为center，子元素.box将在水平和垂直方向上居中。 在使用Flex布局时，需要注意IE9之前的浏览器不支持Flexbox，因此在进行兼容性设计时需要注意。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值