flexbox

Unequal row heights in a flex column

由 房东的猫 提交于 2020-07-09 19:34:02
问题 I'm trying to make a layout like the picture below but I don't know how to specify the column to make it be like a part of it 3/4 the column and the other part is 1/4, I'm trying to use flexbox This what I want the layout looks like: I don't know how to make what I'm saying up there :D as am still new to flexbox. but down below my attempt to create this thing, but i couldn't make the first column consists of two unequal rows. .container { display: grid; width: 100%; height: 45vw; margin: auto

CSS min-height on canvas (or even svg) has a limit?

由 此生再无相见时 提交于 2020-07-09 11:56:06
问题 The Use case Let's said you've a couple of <div> in 2 nested flex (one for column, the other for rows), in order to get something like: You can resize the parent <div> , in any direction, and everything works as expected. note <div> are defined with { /* flex: 1 1 0px */ flex-grow: 1 flex-shrink: 1 flex-basis: 0px /* i.e. independant of content */ } <html> <style type="text/css"> html, body { height: 100%; margin: 0px; } body { padding-left: 30px } span { display: block; margin-top: 30px }

IE11 flexbox issue: bootstrap 4 card height is maximum of child card-body “img-fluid”

由 余生颓废 提交于 2020-07-06 13:47:05
问题 I am working on a template in bootstrap 4.0.0 that I will use for multiple gallery pages containing many (50+) mixed ratio images. I have a grid layout that works well except for IE11. My images are inside cards that are inside buttons and the card heights seem to be stretching to the maximum height of the responsive images. I need help determining if there is a way to make the boxes shrink in height as well as width in IE 11. (width part is working) I want to keep what I have : Cols equal

Maintain same height in elements inside columns located side by side with CSS

由 微笑、不失礼 提交于 2020-07-03 11:52:40
问题 I have a template like this: I want to maintain the same height between each item of both columns, depending on the one that has the biggest height, but only when they are side by side. In smaller screens, when they have width: 100%, each div has its own height depending of its own content height. It should look like this: I think that what I want is something like display: table, but I need both columns to be responsive. All the questions I´have found are about maintaining the same height in

How to wrap second child around a first child using Flexbox

由 冷暖自知 提交于 2020-07-03 09:37:49
问题 We're trying to get the following result using Flexbox, but cannot seem to get the line on the right to wrap around Mr. Bond : Desired output: .flex-parent { display: flex; flex-direction: row; align-items: stretch; } .flex-child-1 { font-weight: bold; } .flex-child-2 {} <div class="flex-parent"> <div class="flex-child-1">Mr. Bond</div> <div class="flex-child-2">We would like for this text to continue on your right hand side on the same line after your name, then continue to a new line under

Does it make any sense to use `baseline` value with `justify-content`, `justify-items` or `justify-self` in CSS Flex/Grid?

由 倾然丶 夕夏残阳落幕 提交于 2020-06-27 18:38:07
问题 MDN align-content, justify-content and justify-items describe baseline as one of their possible values. While baseline makes sense when is used with align-items or align-self , I don't get how it could work along with justify-content , justify-items , justify-self and align-content properties. Do you have any suggestions? 回答1: The MDN is not accurate here as there is no baseline for justify-content If you check the actual Flexbox specification you will see that there is no baseline value for

Flexbox causes adsense error: “adsbygoogle.push() error: No slot size for availableWidth=0”

由 非 Y 不嫁゛ 提交于 2020-06-27 09:48:08
问题 I have a website which uses angular-material and flexbox for it's layouts. I'm trying to include a Google Adsense snippet inside one of these flexbox containers, but it gives me the error: "adsbygoogle.push() error: No slot size for availableWidth=0". However, it runs properly if I put the same snippet outside of a flexbox container. This is not ideal, since my entire site is made with flexbox. So I'd like to find a way to make this work within a flexbox container. Here's a snippet of my code

How to make React Flexbox stretch to full screen height

由 不羁岁月 提交于 2020-06-26 12:38:07
问题 I'm trying to create a React app that is optimized for mobile and am doing most of the layout using flexbox. I'm having trouble forcing the main container of my app to automatically expand to the full device height. What rules can I apply, specifically to my html container <div id="react-app"></div> and my main app container <App></App> so that they will always stretch to the full screen height, even when their children wouldn't force them to do so? 回答1: You can use height:100vh for your App

How to make flexbox with cross axis overflow have the same height?

由 旧街凉风 提交于 2020-06-26 09:05:55
问题 A flex container contains two columns, and the first column could be with any height , so I manually set the height of the container and set overflow: auto . What I expected is the right empty div would have the same height as the left sss box. It's true they have the same height, however it's due to the shrinked height of the left sss box.(The same height as the container 100px) .c { display: flex; width: 400px; height: 100px; overflow: auto; flex-wrap: nowrap; } .empty { background-color:

CSS: Expanding a <div> from right to left to reveal text

由 江枫思渺然 提交于 2020-06-26 04:09:46
问题 I'd like to set up a fixed <div> , containing an icon, which expands from right to left when being hovered over (the <div> expands, not the icon), revealing a piece of text on the left side of the icon. The icon's position stays unchanged. Here's a sketch to help illustrate what I'd like to do: Changing the size of the <div> on hover is no issue, I simply add a class with a larger width (including a transition to animate the expansion). But I struggle with the positioning of the elements. I
订阅 flexbox