I'm working on duplicating this website for practice. using flex to put the navbar side-by-side with the rest of the page (refer to link), but the items aren't going side by side, they're just overlapping. i tried using the overflow: hidden;, like you would for float. i tried adding fixed height and width to the items. can't figure out why they wont go side by side like they're supposed to
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="practice.css">
</head>
<body>
<div class="wholepage">
<nav class="navbar">
<ul>
<li>H</li>
<li>C</li>
<li>P</li>
</ul>
</nav>
<div class="body">
<div class="head">
<div class="left"><h1>essential<br>looks</h1></div>
<div class="right"></div>
</div>
</div>
</div></body>
</html>
the css:
.wholepage {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
overflow: hidden;
}
.navbar {
width: 5%;
background-color: #353535;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
position: fixed;
}
.navbar ul {
margin: 0;
padding: 0;
list-style: none;
}
.navbar li {
color: white;
margin: 9px auto;
}
.navbar a {
text-decoration: none;
color: white;
font-size: 1.25rem;
}
.body {
overflow: hidden;
}
.head {
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 80%;
margin: auto;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.left {
float: left;
}
/*# sourceMappingURL=practice.css.map */
I figured it out. It was not flex-direction column, row was correct. but since i tried to do a "position: fixed;" on the navbar, it screwed up the flexbox. once i removed that, it worked. my question now is, is there a way to do a non-scrolling section with flex or will i have to use a different method
Related
I just want to put the numbers in the midle of the flex items but I just can't figure out how to do it. I tried many ways but none of them worked with flexbox... It is just a learning material where I experiment with flexbox so I want to stick with this display.
As I said I tried many ways so there might be some things that are not needed to be there, sorry about that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flex</title>
<style>
* {
margin: 0px;
}
.con {
display: flex;
background-color: aquamarine;
border: 4px solid wheat;
padding: 16px;
height: 511px;
width: 95%;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0px;
}
.i {
height: 60px;
width: 400px;
background-color: red;
border: 4px solid darkslategray;
flex: 1 1 auto;
}
#i2 {
flex: 2 4 auto;
}
p {
position: relative;
vertical-align: middle;
text-align: center;
margin: 0 auto;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="con">
<div id="i1" class="i"><p>1</p></div>
<div id="i2" class="i"><p>2</p></div>
<div id="i3" class="i"><p>3</p></div>
</div>
</body>
</html>
You can do this by display: flex or or position: absolute
/* can used display flex */
.con > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* or used position */
.con > div {
position: relative;
}
.con > div p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This is happening because your <div class='i'></div> elements have height of 60px in css. So they are the ones that make the whole height of the block they are inside of.
Give each of the <div class='i'></div> elements display: flex; and align-items: center;. This will center the numbers both on x and y axis.
Here is the CodePen: https://codepen.io/Juka99/pen/qBVJdNv
Maybe you can use something like this
I just add some extra flex inside con class:
.con > div {
display: flex;
align-items: center;
}
you can use display: flex; align-items:center; for .i class
Is there a way to stop the span from going to a new line when the parent is flex-direction: column?
.card-content-column {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
margin-top: 20px;
}
.card-content-column__title {
font-size: 24px;
width: 100%;
margin-bottom: 15px;
color: #004a88;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
<div class="card-content-column">
<!--title row-->
<h2 class="card-content-column__title">Taken with natural breathing
<span class="asterisk-weight-normal">*</span></h2>
<!--content-->
</div>
You can change the h2's display property to inline-block. It will work.
.card-content-column {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
margin-top: 20px;
}
.card-content-column__title {
font-size: 24px;
width: 100%;
margin-bottom: 15px;
color: #004a88;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<body>
<div class="card-content-column">
<!--title row-->
<h2 class="card-content-column__title">
Taken with natural breathing
<span class="asterisk-weight-normal">*</span>
</h2>
<!--content-->
</div>
<script src="index.js"></script>
</body>
</body>
</html>
You should use display:contents
.card-content-column {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
margin-top: 20px;
}
.card-content-column__title {
font-size: 24px;
width: 100%;
margin-bottom: 15px;
color: #004a88;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.card-content-column__title .asterisk-weight-normal {
display: contents;
}
<div class="card-content-column">
<!--title row-->
<h2 class="card-content-column__title">
Taken with natural breathing
<span class="asterisk-weight-normal">*</span>
<span>extra column</span>
<span>extra column</span>
</h2>
<!--content-->
</div>
I am trying to add image to the flex item, but i am not able to fit it to the complete div container.
following is my code. can someone advise how can i have image fit in to flex item (div container).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex Box</title>
<meta charset="utf-8">
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 800px;
height: 500px;
background-color: blueviolet;
-webkit-flex-direction: column-reverse;
flex-direction: column;
-webkit-align-content: stretch;
align-content: stretch;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.flex-item {
background-color: bisque;
margin: 15px;
width: 600px;
flex-grow: 1;
}
.third_item {
-webkit-flex: 1;
flex: 1;
}
#iimage {
background-color: transparent;
}
</style>
</head>
<body>
<article class="flex-container">
<div class="flex-item third_item">
<img src="block_beach_1.jpg" width="600px" height="100px" id="iimage">
</div>
</article>
</body></html>
You can fit the image to the container by specifying a width 100% in your css for the image. Also remove the inline width and height property for the image.
Edit: If you want to fit the image horizontally and vertically, apply height 100% along with the width value.
.flex-container {
display: -webkit-flex;
display: flex;
width: 800px;
height: 500px;
background-color: blueviolet;
-webkit-flex-direction: column-reverse;
flex-direction: column;
-webkit-align-content: stretch;
align-content: stretch;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.flex-item {
background-color: bisque;
margin: 15px;
width: 600px;
flex-grow: 1;
}
.third_item {
-webkit-flex: 1;
flex: 1;
}
#iimage {
width: 100%;
height: 100%;
background-color: transparent;
}
<article class="flex-container">
<div class="flex-item third_item">
<img src="https://miro.medium.com/max/3000/1*MI686k5sDQrISBM6L8pf5A.jpeg" id="iimage" />
</div>
</article>
I'm developing a web UI that currently has a blue banner. However, when I try to modify its size in the CSS chunk below, it doesn't update. Before, in the code below, background-size was set to cover, but I need the height of the banner to shrink.
#header {
background-color: #04f;
color: rgba(255, 255, 255, 0.75);
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 8em 0 6em 0;
background-size: 20px 20px;
background-position: center top;
background-attachment: fixed;
text-align: center;
position: relative;
cursor: default;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Author Script by SANDERS</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="static/main.css?version=1" />
</head>
<body>
<!-- Header -->
<header id="header" class="alt">
<div class="inner">
<h1>Sanders Author Script</h1>
<p>A free author formatting script by Stephan J. Sanders</p>
</div>
</header>
</body>
</html>
You can add height property to the css ID.
#header {
background-color: #04f;
height : 500px;
width : 100%;
}
I have seen a few questions like mine, but none of them seemed to be sucessfully answered. My problem might be simple, but I dont get my mistake.
I use several flexboxes in each other. When i change the browsers size it should resize the same way. But at a point the childrens are overflowing the parent flexbox - Ugly
Because I've not found my mistake, i started a new HTML doc - I still have the mistake.
The "gamebox"s children dont do as I want them to.
Here's a fiddle: Live-Demo
Thank you for your help
- RoetzerBub
html , body, main {
margin: 0;
padding: 0;
min-height: 100%;
min-width: 100%;
}
body{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
header, footer{
display: flex;
min-width: 100%;
justify-content: center;
}
header{
flex-shrink: 0;
background-color: #cc0000;
color: white;
z-index: 10;
margin-bottom: 10px;
}
main{
display: flex;
justify-content: center;
align-items: center;
}
footer{
background-color: #444444;
color: white;
flex-shrink: 0;
z-index: 10;
margin-top: 10px;
}
/*as*/
.gamebox{
display: flex;
flex-direction: row;
min-width: 30%;
max-width: 45%;
border: 2px solid #b30000;
justify-content: space-between;
align-items: center;
}
.gb_left, .gb_center, .gb_right{
margin: 2%;
justify-content: space-around;
background-color: yellow;
}
.gb_left{
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
.gb_right{
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
.gb_center{
display: flex;
flex-direction: column;
justify-content: space-between;
}
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="flexstyle.css">
</head>
<body>
<header>HEADER</header>
<main>
<div class="gamebox">
<div class="gb_left">
FLAG
TEAM-A
</div>
<div class="gb_center">
type<br/>
SCORE<br/>
date
</div>
<div class="gb_right">
TEAM-B
FLAG
</div>
</div>
</main>
<footer>FOOTER</footer>
</body>
</html>
It doesn't really make sense here to define the children as flex containers again - there are no elements in them (divs or spans), only text (i.e. nothing that could function as a flex item).
In the following fiddle I removed all this and used the following CSS settings:
.gamebox{
display: flex;
flex-direction: row;
min-width: 30%;
max-width: 45%;
border: 2px solid #b30000;
justify-content: space-between;
align-items: center;
}
.gb_left, .gb_center, .gb_right{
margin: 2%;
background-color: yellow;
min-width: 29%;
word-wrap: break-word;
}
The very last one makes sure that when a word is longer than the width of its container, it's broken.
Here is the fork of your fiddle: https://jsfiddle.net/o6wxy5z7/
To prevent elements from overflowing their containers you need to allow them to shrink as well as grow, for example:
.gb_left{
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
can be changed to:
.gb_left{
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 1 auto;
}
using the shorthand to assign flex-grow, flex-shrink, and flex-basis.
#media (max-width:400px) {
.gamebox {
flex-direction: column;
}
}
Which prevents overflow and keeping in touch with responsive design element
First off, there are four styles you are using for the flex's children that don't belong to them.
Remove these from the flex children (.gb-left, .gb-center, and .gb-right.):
display
justify-content
align-items
flex-direction
Here is a good article on what should be assigned to who: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Now for your problem with the children not shrinking past a certain point -- the text wraps as much as it can and then when the text is as small as it can be it holds the width of the box open.
There is an easy way around this, although it will mean cutting off the text.
Just assign overflow: hidden; to the children.
.gb_left, .gb_center, .gb_right {
overflow: hidden;
margin: 2%;
background-color: yellow;
}