flexbox_编程技术问答社区_程序员问答知识库

以下是关于 flexbox 的编程技术问答

想知道仅使用新的Flexbox布局即可获得与Pinterest或JQuery Masonry相同类型的设计布局.据我所知: .flex-container { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; } .item { width: 220px; height: 250px; margin: 10px auto; padding: 0; background: #ccc; } .item:nth-child(3n+2) { background: #aaa; height: 400px; } 和html我只是在使用php循环创建12个项目

0 2023-05-27 编程技术问答社区 php css flexbox

使用flexbox获得pinterest或jQuery的砖石结构布局

2 2023-05-27 编程技术问答社区 php css flexbox

Flex/Grid属性在Gmail邮件中被删除

Vous avez reçu une nouvelle notification.

0 2023-05-26 编程技术问答社区 php css flexbox gmail css-grid

嵌套式柔性箱

我发现Flex Box确实很有用，而且由于我发现它，我很想在任何地方使用它. 问题嵌套弹性盒是一个好习惯吗?其中有很多，尤其是嵌套的人会影响性能吗? 解决方案简而因此，我会警惕使用其中的很多，因为一个人可以将渲染速度从10ms更改为100ms，其中很多可能会大大增加渲染时间. 加上它们与浏览器的可比性，并且它们无法与绝对定位和阻止元素一起发挥作用. 目前，我建议使用display:table，并将其用于孩子display:table-cell&display:table-row. 这是我使用的示例: .align-table { display: table; width: 100%; table-layout: fixed; } .t-align { display: table-cell; vertical-align: top; width: 100%; }

6 2023-05-24 编程技术问答社区 css performance responsive-design frontend flexbox

display: flex; vs calc(); performance

我今天在一个讨论中出现了，我想知道什么是彼此之间有两个Div的表现方式. 在一侧，我喜欢使用display:flex;，另一侧可以选择使用calc()，原因是我们的div有填充物，我们需要通过填充来减少宽度.案例: 两者都应宽度为50％.默认CSS是: * { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .container { height: 100%; width: 100%; }

0 2023-05-23 编程技术问答社区 html css performance flexbox calc

嵌套的柔性框中的高度百分比

我有一个相当不错的可调节接口与Flexbox一起使用，用户可以调整面板的高度和宽度. 但是，我想更改当前使用像素的面板高度来使用百分比，因此当它们更改一个面板时，其他面板会流动. 一切都可以在宽度上工作，但是当我使用高度％时，它会破裂. 这是一个小提琴，显示破损的％. http://jsfiddle.net/59trw/1/1/ 这个小提琴在红色元素上设置了50％的高度，但根本不可见. 这是CSS .outer-flex { position: absolute; top: 0; bottom: 0; left:0; right:0; display: flex; -webkit-box-align: stretch; flex-direction: row; } .left-panel { width: 30px; background-color: #5eddd8; }

2 2023-05-23 编程技术问答社区 css percentage flexbox

百分比 '最小高度'只在元素有间接父级的 '显示：flex'时起作用；

无法理解为什么#inner元素仅在#main获得display:flex rule时才具有其高度. 这是我的代码: #main { display: flex } #wrapper { background-color: violet } .content { font-size: 2em } #inner { min-height: 50%; background-color: green } Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap in

0 2023-05-23 编程技术问答社区 html css flexbox height percentage

Flexbox列子上的高度为100%

我在flexbox列上遇到麻烦，因为flex'd元素的孩子们不会以百分比响应height.我只在Chrome中检查了一下，据我了解，这是一个仅是铬的问题.这是我的示例: html CSS .flexbox{ position:absolute; background:black; width:100%; height:100%; display: flex; flex-direction:column; } .flex{ background:blue; flex:1; } .flex-child{ background:red; height:100%; width:100

2 2023-05-23 编程技术问答社区 css google-chrome height percentage flexbox

将图片作为链接布置在flexbox中

我正在尝试实现链接的图像并使用Flexbox布置. 当我的图像不是链接时，我的图像看起来很棒: html: CSS: .flexbox { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 0; } 但是，当我进行图像链接时，我将失去flexbox布局的所有好处: html:

18 2023-05-22 编程技术问答社区 css image flexbox

如何用HTML/CSS（网格和Flex）建立这个主页？

我是新手，但我感到难以置信. 任何人都可以描述我如何使用HTML/CSS构建此首页?大多需要在盒子结构及其组织方式方面的帮助. 预先感谢！解决方案从问题语句中推断出来，您需要为给定的图像内的行和列具有HTML/CSS布局，因此我尝试实现一个布局，以帮助您实现更广泛的目的.您也可以参考Codepen链接: a> .container{ font-size: 24px; font-family: arial,sans-serif,helvetica; text-align: center; } .topmost{ display: grid; grid-template-columns: 50% 50%; } .topmost > .left{ grid-row: 1 / span 2; background-color: skyblue; height: 150px; } .topmost > .right-top{ bac

8 2023-05-22 编程技术问答社区 html css flexbox css-grid

设置儿童的宽度，以填充父体

我想要div的孩子填充其宽度. 现在正在使用这样的代码: 在 .parent { width: 100%; display: inline-block; height: 120px; background: #000; padding: 10px; box-sizing: border-box; } .child { display: inline-block; margin-left: 1%; width: 31.4%; height: 100px; background: #ddd; } 它适用于3 boxes，但是我想要的是 - 即使盒子计数为one或two我也

2 2023-05-19 编程技术问答社区 css flexbox parent-child

如何使用Materialize和Flexbox创建等高的列？

我试图使用flexbox，以便使用我使用Motitalize创建的面板. 这是创建我的面板的HTML: panel1 panel2 panel3 panel4 这就是结果: 现在，我想将其与pane

6 2023-05-19 编程技术问答社区 html css flexbox panel materialize

如何在flexbox中减少项目之间的空间 justify-content: space-between

我正在为我的网站制作页脚，并且正在使用Flexbox进行布局.这是我的页脚的CSS: .footer { display: flex; flex-direction: row; align-items: center; justify-content: space-between; position: fixed; left: 0; bottom: 0; width: 100%; height: 5vh; background-color: transparent; color: white; text-align: center; } 看起来像这样: 他们之间有很多空间.我如何缩小该空间? 如果您需要更多信息，请评论. 谢谢！解决方案使用Flexbox的justify-content您可以控制菜单项之间的空格 .footer { display: flex; flex-dire

14 2023-05-16 编程技术问答社区 html css flexbox

React原生Flatlist在自定义动画底片内不滚动。

我创建了一个自定义的动画底部表.用户可以上下移动底部表.在我的底部表格中，我使用了flatlist，在其中获取数据并将项目作为卡渲染.现在，一切都按预期工作，但我有一个问题套件滚动.在底部的纸板内部平面列表不滚动.我已经制作了硬编码的高度值2000px，这确实是实践的，并且flatlist的contentContainerStyle添加了硬编码的paddingbottom 2000(也是另一种不良练习).我想根据Flex-box滚动列表.我不知道如何解决此问题. 我在 expo-snacks 这是我的所有代码 import React, { useState, useEffect } from "react"; import { StyleSheet, Text, View, Dimensions, useWindowDimensions, SafeAreaView, RefreshControl, Animated, Button,

0 2023-05-16 编程技术问答社区 react-native flexbox scrollview padding react-native-flatlist

填充 | 弹性箱布局中的底部/顶部

我有一个 flexbox布局包含两个项目.其中一个使用填充: #flexBox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column; } #text { border: 1px solid green; padding: .5em; } #padding { margin: 1em 0; border: 1px solid blue; padding-bottom: 56.25%; /* intrinsic aspect ratio */ height: 0; } Some text 蓝

0 2023-05-16 编程技术问答社区 css padding flexbox aspect-ratio

如何将两行较小的元素与一个较大的元素排列在一起？

我正在尝试创建一个响应式网格，其中两行较小的项目与较大的元素保持一致. 我要实现的目标: 我拥有的: #thumbs { background-color: lightcoral; width: 100%; margin-top: 90px; margin-left: auto; margin-right: auto; text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; } #thumbs div { vertical-align: top; display: inline-block; *display: inline; zoom: 1; } .stretch { width: 100%; display: inline-bloc

8 2023-05-16 编程技术问答社区 html css flexbox css-grid

如何将P5.JS帆布放置在DIV容器中?

到目前为止，我已经使用了P5.JS帆布大小，可以使用document.getElementById("divName").offsetWidth和.offsetHeight对其父级div容器大小做出反应，但是我尚未设法确定为什么它也没有共享其位置.这是我的应用程序的简化版本. p5.js: var sketchWidth; var sketchHeight; function setup() { sketchWidth = document.getElementById("square").offsetWidth; sketchHeight = document.getElementById("square").offsetHeight; createCanvas(sketchWidth, sketchHeight); } function draw() { background(0,0,255); } function windowResized()

8 2023-05-16 编程技术问答社区 javascript html css flexbox p5.js

手机上猫头鹰旋转木马的高度

我有一个图像，该图像使用猫头鹰旋转木马覆盖桌面上的整个屏幕. 当我在电话设备上查看相同的图像时，它仅占屏幕大小的三分之一. 我如何调整高度，因此比目前在电话上的高度高? 我已经阅读了几个线程，但是与猫头鹰旋转木马的新线程不确定我是否做错了.我找不到这个班级我的猫头鹰旋转木马的配置是 items: 1, smartSpeed: 1000, autoplay: true, autoplayTimeout: 6000, dots: false, loop: true, mouseDrag: false, autoHeight:false, touchDrag: false, autoHeight:true 猫头鹰旋转木马v2.3.

4 2023-05-16 编程技术问答社区 css flexbox owl-carousel

使柔性项目包裹起来，以创建一个新的列

我在DIV中填充元素，我想安排它们，这样就是这样: 1 3 2 4 现在，它只是下降 1 2 3 4 我该如何告诉它在2个元素之后移至下一列? .parent { display: flex; flex-direction: column; flex-wrap: wrap; } 1 2 3 4 解决方案您需要在容器上设置高度.否则，flex项目将如何包装在哪里? height .parent { display: flex; flex-direction: column; flex-wrap: wrap; align-conten

10 2023-05-16 编程技术问答社区 html css flexbox css-grid

水平列表项，中间有线

我试图将元素之间的薄灰色水平线定位在水平磁带上，以提供元素之间的连接感知.代码将在下面.如何在这些元素之间添加一条简单的线? ul { display: flex; align-items: stretch; /* Default */ justify-content: space-between; width: 100%; margin: 0; padding: 0; } li { display: block; flex: 0 1 auto; /* Default */ list-style-type: none; } 1 2 3 4 解决方案这是每个lis. 之间运行的线的示例向ul添加position: relative，因此它成为:after元素的父母位置:af

4 2023-05-16 编程技术问答社区 html css flexbox

首页
<
1
2
3
4
5
6
7
8
>
尾页