Hi, in want to create a website with some special flexbox sizes but i try http://the-echoplex.net/flexyboxes/ and i cant get my boxes how i want to...
Can u help me?
i upload a picture how it should be lookinghtml-seminar.de/woltlab/attachment/1778/
Hi, in want to create a website with some special flexbox sizes but i try http://the-echoplex.net/flexyboxes/ and i cant get my boxes how i want to...
Can u help me?
i upload a picture how it should be lookinghtml-seminar.de/woltlab/attachment/1778/
Have you already written something to code ?
if yes.
show me please.
no, before i had normal boxes and someone told me to take flexboxes, its better, i try these and the old code dont work with flex...i have only the standard things, head, meta etc
Please try it yourself first and if you do not get ahead, show your HTML and CSS code. We rarely deliver a finished source code.
i said that i try this on the flexbox website but i cant get the boxes how i want to.....how should i try to give u code when i try it but it doenst work???
Then show us your previous attempt
.flex-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.flex-item:nth-child(1) {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.flex-item:nth-child(2) {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.flex-item:nth-child(3) {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.flex-item:nth-child(4) {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.flex-item:nth-child(5) {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
The flexyboxes page is fine for training purposes but it is not suitable for creating a nested layout like the one you require.
You write: "before i had normal boxes " - probably that HTML is suitable and needs new styling by flexlaout only. Show us that HTML so that we can check
BTW: These browser specific definitions like -ms-flex-item-align are no longer necessary, you can omit them.
i deleted it
What about your HTML? Please post it.
i deleted it
but its fine, another person helped me
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.