flexbox

How to specify row height of multi-line flexbox layout and have remaining rows stretch

由 只愿长相守 提交于 2021-02-08 04:38:32
问题 I have a multi-line flexbox layout where I would like to specify the height of one of the rows and have the remaining rows stretch to fill. If I set the height of the blue div below, I get a bunch of empty space. #container { display: flex; flex-wrap: wrap; height: 500px; width: 500px; } #one, #two, #four, #five { flex: 1 1 49%; } #three { flex: 1 1 99%; background-color: blue; height: 15px; max-height: 15px; } #one { background-color: green; } #two { background-color: yellow; } #four {

Opinions Needed for a Responsive Four-Column Layout Flexbox

由 拈花ヽ惹草 提交于 2021-02-08 04:38:22
问题 I created a responsive four-column layout by using a mobile-first approach. The smallest screen shows 1 column, the larger screen 2 columns, and the largest screen 4 columns. It seems to work so far, but I'd like you to take a look at my code and tell me if there's anything wrong with my approach. I would be grateful for your opinions. <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FlexBox Test<

inline-flex input element breaks to new line in IE11

由 柔情痞子 提交于 2021-02-07 12:18:53
问题 I have a few html elements next to each other in a container positioned with display:inline-flex . This works well for button elements, but as soon as I try to add an input type="text" element, the textbox is placed below the buttons (only in Internet Explorer 11; not sure about IE10 or below). It works as expected (textbox in same line as buttons) in Firefox, Chrome and even Edge. How can I get IE to display this correctly? See jsFiddle for full html and css code to illustrate the problem:

inline-flex input element breaks to new line in IE11

由 邮差的信 提交于 2021-02-07 12:18:34
问题 I have a few html elements next to each other in a container positioned with display:inline-flex . This works well for button elements, but as soon as I try to add an input type="text" element, the textbox is placed below the buttons (only in Internet Explorer 11; not sure about IE10 or below). It works as expected (textbox in same line as buttons) in Firefox, Chrome and even Edge. How can I get IE to display this correctly? See jsFiddle for full html and css code to illustrate the problem:

inline-flex input element breaks to new line in IE11

由 爱⌒轻易说出口 提交于 2021-02-07 12:18:28
问题 I have a few html elements next to each other in a container positioned with display:inline-flex . This works well for button elements, but as soon as I try to add an input type="text" element, the textbox is placed below the buttons (only in Internet Explorer 11; not sure about IE10 or below). It works as expected (textbox in same line as buttons) in Firefox, Chrome and even Edge. How can I get IE to display this correctly? See jsFiddle for full html and css code to illustrate the problem:

CSS text-overflow ellipsis not working in Grid / Flex

由 自作多情 提交于 2021-02-07 07:11:34
问题 I am not able to get text-overflow ellipsis to work in a css grid. The text is truncated but the ellipsis dots don't show up. Here is my css: .grid { display: grid; margin: auto; width: 90%; grid-template-columns: 2fr 15fr } .gridItem { border: 1px solid red; display: flex; height: calc(50px + 2vw); align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } <div class="grid"> <div class="gridItem">Why no ellipsis on this div?</div> <div class="gridItem"></div> <div

How to make side menu with flexbox?

由 空扰寡人 提交于 2021-02-07 04:39:10
问题 I need to make the pink element at the left and all the other needs to be right side width: calc(100% - 250px) just like the image shows The reason why I use display: flex I need to use order for mobile and tablet devices . I have been trying with the properties of flex-basis but unfortunately none my tricks are not working 😃 html { height: 100%; } body { margin: 0; min-height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap;

Using flexbox sticky footer with bootstrap

由 ε祈祈猫儿з 提交于 2021-02-06 20:44:10
问题 I'm trying to use this sticky footer: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ body{ display: flex; min-height: 100vh; flex-direction: column; } .content{ flex: 1; } But it messes up the rendering at the < 768px widths. Any simple css fix to get it work for all resolutions? http://jsfiddle.net/2xvv5mod/ 回答1: You need to give the flexbox item a width of 100% . In this case, that would be that .content element: Updated Example body { display: flex; min-height: 100vh;

Using flexbox sticky footer with bootstrap

由 醉酒当歌 提交于 2021-02-06 20:43:46
问题 I'm trying to use this sticky footer: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ body{ display: flex; min-height: 100vh; flex-direction: column; } .content{ flex: 1; } But it messes up the rendering at the < 768px widths. Any simple css fix to get it work for all resolutions? http://jsfiddle.net/2xvv5mod/ 回答1: You need to give the flexbox item a width of 100% . In this case, that would be that .content element: Updated Example body { display: flex; min-height: 100vh;

How can I use flexbox to achieve a complex, responsive HTML layout?

由 核能气质少年 提交于 2021-02-06 02:27:11
问题 I have looked into Flexbox to achieve a responsive layout like pictured below. Unfortunately I still have not figured out how to achieve a desktop layout like Figure 1 which rearranges itself to Figure 2 on viewports smaller than 414 pixel. Figure 1 (desktop viewports) Figure 2 (mobile viewports) (scaled version) Click here for image in original size My code so far : .flexbox { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; width: 100%;
订阅 flexbox