mocked up an example of my issue (simplified) in this codepen: https://jsfiddle.net/bhuaL0vf/12/
I'm basically unsure of what styles on the styled-link are preventing the open-text from floating right to the end of the row - so that it sits right at the end as opposed to cosied up-beside it. I've re-created this elsewhere with these styles however inline-flex is not necessary there so I am assuming it is to do with that.
TEMPLATE:
<li class="styled-link">
<span class="open-text">Open</span>
List item one
</li>
STYLES:
.styled-link {
display: inline-flex;
align-items: center;
font-size: 12px;
color: #63666a;
}
.open-text {
float: right;
font-size: 14px;
display: block;
margin-right: 35px;
}
Apologies if I'm missing something really obvious, a little unfamiliar with inline-flex.
You can replace inline-flex with flex and justify the flex items using justify-content property to achieve the desired alignment as per your needs.
For example:
.styled-link {
display: flex; /* Replaced inline-flex to flex /*
align-items: center;
font-size: 12px;
color: #63666a;
justify-content: space-between; /* Add space between flex items */
}
/* Removed float */
.open-text {
font-size: 14px;
display: block;
margin-right: 35px;
}
Related
I have two questions.
first,
I have a form and I'm trying to center everything to the center of it and in the same time align the text to the left side of the fields.
I'v tried to give justify-center and align-items to the "container" class and to the "form-style" class and nothing works.
Part of the code and a Codepen link
.form-style {
width: 50%;
position: relative;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
And,
.container {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
}
Second,
I'm trying to make my submit button to get 100% width and nothing - there's space at the sides,
input[type="submit"] {
display: block;
background-color: #08ABD9;
font-family: 'jura', sans-serif;
font-size: 16pt;
font-weight: bold;
height: 40px;
border: none;
margin-top: 40px;
margin-bottom: 0px;
width: 100%;
}
Start here: There's a syntax error in your code. The display: flex on the container is not being recognized due to the presence of an invisible character. None of the flex properties are working.
So first fix that. Just delete the line entirely and re-write display: flex. You will notice major changes in your layout.
Second, your flex-direction is set to column on your label/input containers. That stacks your form elements vertically.
#fname, #email-a, #phone, #dropdown, #mrole, #age, #textbox {
display: flex;
flex-flow: column wrap;
width: 100%;
margin-left: 40px;
}
If you want the text and input to line up in a row, use flex-direction: row.
Lastly, with regard to your submit button, your container has left and right padding which prevents the button from reaching the edges.
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Once you remove the padding rules, the button will extend from edge to edge.
I have a code - https://codepen.io/anon/pen/MQjpBG
It's a simple list with a colored block and text in each li
I need the list to be vertical and the text and block to be vertically aligned.
I'm trying to do this with flex and align-items but the text and block never center exactly
Am I doing something wrong, is there a better way to do this.
.element{
display: flex;
list-style: none;
&__item{
display: flex;
align-items: center;
margin-right: 10px;
&:last-of-type{
margin-right: 0;
}
&-square{
background: red;
//display: block;
display: inline-block;
height: 20px;
width: 20px;
}
&-text{
font-weight: bold;
}
}
}
I want the block and text to fit like so.
The align-items: center; seems to do it but its slightly off, like
There's nothing centering them (in your codepen).
Add this to your code:
.element{
display: flex;
justify-content: center; /* horizontal alignment */
.element__item {
display: flex; /* nested flex container */
align-items: center; /* vertical alignment */
}
revised codepen
Unfortunately, it looks like the issue is a function of the font chosen. Different fonts will have different descender heights (e.g. the tail of a "g") as well as different positioning of the base line relative to the full text box, and it appears that some fonts will have these values set such that they may not be visually centered.
I modified your CodePen example and forcibly set the font-family of the first element to Arial while leaving the second as the default (on Firefox on macOS 10.15/Catalina), and the Arial version definitely looks much more vertically centered:
You may be able to fix this by changing the font used, but obviously this isn't a change that can be made lightly on a large codebase.
To make the list to be vertical, just add "flex-direction"
display: flex;
list-style: none;
flex-direction: column;
For horizontally center aligned:
.element {
justify-content: center;
}
For vertical center alignment of squares and text:
.element__item-square {
vertical-align: middle;
}
.element__item-text {
vertical-align: middle;
}
I have been searching around, but for the life of me I cannot figure out what's going on. My text is getting wrapped at certain tags, while I want it all on one line.
I have aligned three DIV elements next to each other through the use of display: flex;
This all works out quite nicely and display is exactly the way I want it. Except for the fact that, for some unexplicable reason (at least to me), if I put a text snippet in one of those divs and that text snippet contains something between tags like <span></span> or <b></b>, the text is automatically wrapped before and after the tag onto a new line.
I have the code here:
.pagetitlewrapper {
width: 99%;
background-color: #c1dbff;
border-radius: 25px 25px 0px 0px;
padding: 10px;
display: flex;
text-align: center;
}
.pagetitleleft,.pagetitlecenter,.pagetitleright {
width: 33%;
align-items: stretch;
display: flex;
justify-content: center;
flex-direction: column;
}
.pagetitleleft {
text-align: left;
font-size: 9;
}
.pagetitlecenter {
text-align: center;
}
.pagetitleright {
text-align: right;
font-size: 9;
resize: vertical;
}
<div class='pagetitlewrapper'>
<div class='pagetitleleft'>Welkom, FNAME LNAME</div>
<div class='pagetitlecenter'><h1>Nexus Consult DMS</h1></div>
<div class='pagetitleright'>
Licensed to <span>DON'T WRAP</span> - License valid until xx/xx/xxxx.
</div>
</div>
Around the DON'T WRAP, I have put <span> tags to illustrate the problem. If you remove these tags, the text is all displayed on one line as I want it. Basically I want to be able to make DON'T WRAP bold without it wrapping the text before and after.
I have been searching the web, to no avail. I found a couple of code snippets online which surprisingly did the same thing. I wonder why nobody ran into this problem before?
I have tried to play a bit with white-space: nowrap; in CSS, but that didn't seem to work either.
Anyone has any idea? Someone can point me in the right direction?
Thanks,
Kenneth
Why it break line is because of the display: flex; flex-direction: column on the pagetitleleft/center/right elements, which make the span a flex column item and take 100% width.
By dropping the display: flex on the pagetitleleft/center/right elements and set align-items: center to their parent, their text will center vertically
.pagetitlewrapper {
width: 99%;
background-color: #c1dbff;
border-radius: 25px 25px 0px 0px;
padding: 10px;
display: flex;
align-items: center;
}
.pagetitleleft,.pagetitlecenter,.pagetitleright {
width: 33%;
}
.pagetitleleft {
text-align: left;
font-size: 9;
}
.pagetitlecenter {
text-align: center;
}
.pagetitleright {
text-align: right;
font-size: 9;
resize: vertical;
}
<div class='pagetitlewrapper'>
<div class='pagetitleleft'>Welkom, FNAME LNAME</div>
<div class='pagetitlecenter'><h1>Nexus Consult DMS</h1></div>
<div class='pagetitleright'>
Licensed to <span>DON'T WRAP</span> - License valid until xx/xx/xxxx.
</div>
</div>
This behavior makes sense and is defined in the flexbox specification.
4. Flex Items
Each in-flow child of a flex container becomes a flex item, and each
contiguous run of text that is directly contained inside a flex
container is wrapped in an anonymous flex item.
Your right column (.pagetitleright) is a flex container with flex-direction: column:
.pagetitleleft,.pagetitlecenter,.pagetitleright {
width: 33%;
align-items: stretch;
display: flex;
justify-content: center;
flex-direction: column;
}
In this container, you have three flex items:
<anonymous-flex-item>Licensed to</anonymous-flex-item>
<span>Licensed to</span>
<anonymous-flex-item>- License valid until xx/xx/xxxx.</anonymous-flex-item>
As a result, you're getting three flex items stacked vertically.
It doesn't matter if you use span, b, strong, em. Whatever elements you create in the container become flex items and behave accordingly.
If you don't want these elements to stack vertically, then don't use flex-direction: column.
There is a simple solution. just add white-space: pre-wrap;
Some-Flex-Container {
display: flex;
white-space: pre-wrap; /* solution */
}
I have a several buttons on a page and I am suing flex and flex-wrap to give them spreading ability. I cannot however get the text within the elements to center in their 100x100 px boxes (the size is an attribute of the .
I tried some solutions here, but none of them seem to work for my situation: CSS Center text (Horizontal and Vertical) inside a DIV block
The Line-height solution does not work, as some of the text takes more than one line.
The absolute positioning solution also does not work as it places the buttons all on top one of another.
The table approach is undesirable as it does not allow the buttons to wrap. Also I am going to have over 30 of these buttons.
HTML:
<section id="directory">
Jaguar Chagra
A marriage breaks up
Amasanga warmi
Anaconda caught
Big Water Killing
</section>
CSS:
#directory {
display: flex;
flex-wrap: wrap;
}
#directory a {
background-color: #BFBDAF;
width: 100px;
height: 100px;
margin: 10px;
padding: 20px;
text-decoration: none;
color: black;
text-align: center;
vertical-align: middle; /* does nothing */
Here is an image of what it looks like so far:
You need to add align-items: center; to #directory a and make it a block-level element with display: flex.
#directory a {
display: flex;
background-color: rgb(191, 189, 175);
width: 100px;
height: 100px;
margin: 10px;
padding: 20px;
text-decoration: none;
color: rgb(0, 0, 0);
text-align: center;
align-items: center;
}
I'm new to this topic and read myself into it. I worked through this guide.
In this guide they say:
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space.
I want Flexbox to use all available space, but obviously right under 2 there is empty space and also enough space for the element 3.
When I take a look at the philosophy of Flexbox I can see not used but available space in my layout.
Am I doing something wrong in my css or is Flexbox broken?
Layout/Output
CSS
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: flex-start;
-webkit-flex-flow: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 300px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
HTML
<ul class="flex-container">
<li class="flex-item">1111111111 1111111111</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
Flexbox is primarily a one-dimensional layout mode. It lets you distribute & size elements responsively, in just a single axis (horizontal or vertical), and then it supports basic alignment/stretching in the other axis.
flex-wrap: wrap can make it look two-dimensional, but really it just lets you split your flex items into "lines", where each "line" is like a one-dimension flexbox. And the lines don't overlap (or really interact at all).
So, in your diagram, the "3" element doesn't fill in the empty space because it's in a separate flex line from where the empty space is, and the flex lines cannot overlap.
To achieve what you want in pure CSS, I think you'll need CSS Grid, specifically with grid-auto-flow: dense. This spec is still under active development, though, and browsers have mixed levels of implementation, so it's not ready for use in production websites yet.
Yes, your CSS is slighty wrong
JSFiddle Demo
CSS
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap; /* here */
}
.flex-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
background: tomato;
padding: 5px;
width:300px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
However, on further discussion it appears that what you are trying to achieve is not possible (AFAIK) with flexbox.
I expect element 3 to move under 2, so all the empty space is used
Accordingly, I think a JS solution like Masonry.Js would be the recommended solution.