flexbox

Flexbox or Column CSS for positioning elements like this

由 怎甘沉沦 提交于 2019-12-25 00:13:52
问题 Is there any solution to avoid the float and to use flexbox and make this type of layout like in my representation? I don't have any example but this picture with what I need. I'll try to explain in words: This grid starts from 1025px and with 2 columns and the big red square in the right side. From 1100px I need 3 columns and the big red square in the right From 1680px I will have 4 columns and the big red square in the right. The position of the items must be like in my picture Depending of

How do I align this item with flex? [duplicate]

由 梦想与她 提交于 2019-12-24 23:40:58
问题 This question already has answers here : Make body have 100% of the browser height (22 answers) How to vertically center a div for all browsers? (45 answers) Flexbox: center horizontally and vertically (11 answers) Closed 5 months ago . I am trying to center align this button with flex box, but it is not working and I don't know what the problem is. <html> <head> <style media="screen"> body { display: flex; align-items: center; justify-content: center; } </style> </head> <body> <button> Align

css flexbox equal height columns not working

由 喜你入骨 提交于 2019-12-24 22:47:56
问题 I am trying to get css3 flexbox working (for the first time) to make equal height columns (for those browsers that support it). I have seen various examples across the web but I cant get any to work. Here is my code (followed by a jsfiddle link) <div> <span><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p></span> <span>col2</span> <span>col3</span> </div> div { background:red; float:left; -webkit-display:flex; -moz-display:flex; display:flex; } span { display:block; background:yellow; float:left;

Iron flex layout: not getting the proper layout

由 ぐ巨炮叔叔 提交于 2019-12-24 20:50:29
问题 i am using iron flex layout https://www.webcomponents.org/element/PolymerElements/iron-flex-layout i wanted to align my div like a dashboard view but i am not able to align the boxes, i am using the layout standards https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html mentioned here, no other iron flex styling is working other than layout inline layout-start The template look likes </custom-style> <style> .layout { background-color: #263367; padding:

How can i fix IE image and column flexbox bug?

由 不羁岁月 提交于 2019-12-24 20:23:54
问题 I've made a resizable template using bootstrap4 css. In OK in all browsers except IE 11.0. To be sure .d-flex class doesn't works properly (I've used it to make all of my columns of the same height). Googling for solution doesn't make progress. If I remove this class all seems to be OK except the same height of columns. But the most interesting thing happens with images - they really displayed at full size in ie. Also tried different fixes from here - Bootstrap Image Responsive messed up on

CSS/JS/Jquery - Flex items for responsive screen sizes

由 混江龙づ霸主 提交于 2019-12-24 19:47:19
问题 I have a site with 3 items in my navigation which I want to remain on one line. The first is the main menu which has the main site links and should be to the left of the nav bar. The second is contact information which should be centered in the nav bar. The third is the auth menu, which has sign in/account links etc, which should be to the right of the nav bar. #nav{ height:50px; width:100%; position:relative; display:flex; } ul{ display:inline-block; height:50px; line-height:50px; list-style

Unify and align elements that are inside a number of divs that are in a flex container [duplicate]

由 时光毁灭记忆、已成空白 提交于 2019-12-24 19:33:50
问题 This question already has answers here : How to get header from cards or similar to have the same height with flex box? (2 answers) Equal height children of flex items (2 answers) Closed last year . I have some cards that lie inside a flex container, those cards include some elements. It currently looks like this: Sometimes the headline in a card takes two lines and the other headlines don't, which causes an empty space at the other cards: What I want is to align each element with its

Uniform auto items height in flexbox

由 。_饼干妹妹 提交于 2019-12-24 18:23:30
问题 I have a page with a flex box and multiple flex items, flex items represent posts, those posts sometimes have large titles and sometimes small ones resulting in a non uniform height per row, as you may see in this image: I don't want to set a fixed height because now small titles will have a big empty space. Rather, I want the height to be constant per row and is equal to the least height possible to contain the post elements. Here is my Css: /* Post Pages */ .post-containter { padding:4%;

Equal height sections within flexbox columns?

由 左心房为你撑大大i 提交于 2019-12-24 17:11:39
问题 I'm using flexbox columns for a pretty basic layout. There is a header, image and a list below. List must have a border and can have varying contents. Is it possible to have those list sections equal height based on the biggest without JavaScript? Or one needs to calculate the biggest section height with JS and apply it to others? This is what I want: This is what I have: .columns { display: flex; } .col { margin-left: 20px; } ul { margin: 0; } .list { padding: 24px; border: 1px solid blue; }

vertically center content that exceeds window height

由 人盡茶涼 提交于 2019-12-24 16:49:20
问题 I'm trying to vertically center a box by using display: flex; , while it's working when the box is small enough, but when the box exceeds the window height, part of the content will be cut off. Working example: http://codepen.io/woutr_be/pen/bVQXLe Example with large height: http://codepen.io/woutr_be/pen/KdrOZm It seems to be related to the body: { height: 100%; } , but when I remove that, the box isn't centered anymore: http://codepen.io/woutr_be/pen/MazNrE I can't figure out how to make it
订阅 flexbox