I have this kind of structure where the footer is display: flex, and
.fleft is flex 1 0 50%;
I want to add a new div and give it full width. w/o changing structure can this be done with some css flex tweak?
If you add flex-wrap:wrap to the footer CSS the copyright element will appear below:
.footer{display: flex; flex-wrap: wrap;}
.fleft {flex: 1 0 50%; background-color:yellow;}
.fright {flex: 1 0 50%; background-color:cyan;}
.copyright {flex: 1 0 100%; background-color:magenta;}
You are using display:flex to get the left and right elements to appear in the same flexbox row but the flex-grow and flex-shrink values are having no effect: so this also works:
.footer{display: flex; flex-wrap: wrap;}
.fleft {width: 50%; background-color:yellow;}
.fright {width: 50%; background-color:cyan;}
.copyright {width:100%; background-color:magenta;}
To make more use of the powerful capabilities of CSS Flexbox, consider using something like this:
.footer{display: flex; justify-content:space-around; flex-wrap: wrap;}
.fleft {flex: 0 1 500px; background-color:yellow;}
.fright {flex: 0 1 500px; background-color:cyan;}
.copyright {width: 100%; background-color:magenta;}
The right element will appear under the left element if the screen width is less than 1000 pixels. The flex-shrink value allows the width of each to shrink if the screen width is less than 500 pixels.
It’s probably better practice to wrap the left and right elements in a ‘div’ element (with display:flex), rather than forcinig the copyright element to create a new flexbox row by using width:100%.
2 Likes
Just for fun css grid can do this easily also.
3 Likes
Yes, I know that GRID is powerful. Yet I never could learn it so far.
I have one more question related to CSS, but slightly off-topic to the current discussion.
On click input element was creating a border. I tried to use this →
input[type="button"]{
outline:none;
}
input[type="button"]::-moz-focus-inner {
border: 0;
}
It doesn’t seems to be working.
Which browser and do you have an example.
Some browsers apply a box shadow on focus as well as outline or border. I generally set the appearance to none on buttons to avoid any issues and handle all the styling myself.
Remember to apply suitable :focus styles otherwise keyboarders can’t navigate.
2 Likes
Hi there,
I am using chrome. I used to upload everything on the live server so that we all can reemain on the apgee and here should not be any interpretation gap. I will try to upload it soon or will try to guve the whole narrative soon by other means.
I have a question we often see some part of the HTML remians fix while we scroll and other remain static. what is this feature called? Example: fixed header menu, this posisbility is not exhaustive though.
I think you answered your own question:)
Position:fixed is used for fixing an element to the viewport or position:sticky is used to fix an element to the viewport while its parent is in view.
1 Like
Off-topic:
I have a question. Last night before I went to bed I saw that my account was on something: read-only mode. I was unable to make any edits, like, or post. Did I make any mistakes? or that was a global impact created by the administrator of this website on all the user of the website?
I have created a Pen here →
I tried absolute and relative positioning, but they didn’t work quite well. If you can give it a try.
The moment I used absolute/relative positioning on the left-hand side, the flex container was occupying full with and I have to contain a max-width over that, which I find and abuse over flex property.
Sounds as though you were logged out. I’m not aware of any other issues.
I’m not quite sure what you are attempting but yes absolute or fixed positioning will remove elements from the flow so you have to design the rest of the page to avoid them.
For example if you had a fixed left sidebar you would make sure the rest of the page starts to the right of the sidebar (usually a margin left matched by the width of the fixed element).
It does not make much sense to fix elements that take up a lot of the width unless they are fixed headers or footers.
A fixed sidebar would be useful for a menu or something like that or a control panel type of thing.
A sticky element would be useful for your little comment form that would stick at the right side while the actual comments on the left scroll up and down.
e.g. in your demo add this:
.commentform{
position:-webkit-sticky;
position:sticky;
top:0;
align-self: flex-start
}
There’s an example of a sticky section in this oldish demo.
1 Like
In this Codepen I have given every element a coloured border and margin so you can see what is going on:
The <header> and <main> elements (grey borders) are laid out by classic CSS but they are flexbox containers.
The <header> contains an <h1> element which is centered because ‘justify-content’ for the container is set to ‘space-around’.
The left <section> (red border) and right <section> (green border) have the same height because they have ‘align-self: stretch’ by default.
Both sections have been given ‘flex: 1 1 450px’. The flex-shrink value means that their widths may shrink if less than 450 pixels is available (such as on smartphones). The flex-grow value means that their widths can increase beyond 450 pixels if there is spare space available. I have included ‘max-width: 600px’ so that on large screens they will be 600 pixels wide. As the sections can shrink by any amount and can stretch to 600 pixels, it may seem that the flex-basis of 450 pixels has no effect. However the flex-basis comes into play as the threshold when wrapping will occur.
The left section is in itself a flexbox container with default row direction. The image (orange border) and <div> (cyan border) are aligned to the left because the container has ‘justify-content: flex-start’ by default. The image has been given ‘align-self: flex-start’ to prevent default stretching. The <div> is not a flexbox container so layout within it is classic CSS. It could make sense to make it a flexbox container with column row direction.
The right section (green border) is also a flexbox container but this time with column direction. The button has been given ‘align-self: center’ to avoid default stretching.
The real power of CSS Flexbox can be seen (on a large monitor) if the width of the browser window is slowly narrowed right down.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.