मैं एचटीएमएल / सीएसएस के लिए काफी नया हूं और सीएसएस फ्लेक्सबॉक्स लेआउट सीखने की कोशिश कर रहा हूं। फ्लेक्सबॉक्स का उपयोग करके स्क्रैच से बस एक साधारण साइट मनोरंजन पर काम करना।
पूर्ण स्क्रीन में, लोगो पर छवि पोजिशनिंगअच्छा लग रहा है। हालांकि, स्क्रीन आकार के चारों ओर स्थानांतरित होने पर, दाएं तरफ मेरी एनवी बार जवाब देती है लेकिन बाईं ओर लोगो छवि नहीं होती है। मेरा मानना है कि मैंने इसे सही तरीके से स्थापित किया है।
.header-container {
display: flex;
width: 100%;
height: 150px;
align-items: center;
justify-content: space-between;
}
.header-container .logo .sb{
display: flex;
justify-content: flex-start;
width: 60%;
position: relative;
left: 50px;
padding: 20px;
}
यहां मेरे काम के लिए एक लिंक भी है: https://codepen.io/gkunthara/pen/VWdrYj
मैं वास्तव में क्या गलत कर रहा हूँ? पोजिशनिंग के प्रकार या फ्लेक्सबॉक्स के साथ स्थिति के प्रकार पर कोई सुझाव सामान्य रूप से सराहना की जाती है!
उत्तर:
उत्तर № 1 के लिए 1स्थिति हटाएं nav & सेट max-width: 100% लोगो छवि पर।
https://codepen.io/thesumit67/pen/bRKYLx?editors=1100
जवाब के लिए 2 № 2
स्थिति हटाएं
.header-container .nav-bar-container {
display: flex;
/*position: absolute;*/
/*right: 100px;*/
}